setTimeout(), clearTimeout() 기본 동작 방식 살펴보기

setTimeout(), clearTimeout() 

 

지난 번에 <MBTI 이상형 남친 찾기 / 여친  찾기> Web 애플리케이션을 만들면서 시간 차를 두고 동작하는 기능에 대한 구현이 필요했었습니다.

 

그래서 예전에 봐두었던, setTimeout()과 celarTimeout() 함수를 떠올리게 되었고 사용을 하려고 했는데, 돌아서면 까먹는 나이다 보니 잘 생각이 나지 않더라구요. 그래서 오늘은 실행 타이밍을 제어할 수 있는 이 기능에 대해서 정리해두려고 합니다.

 

 

setTimeout() 기본 동작 방식

 

setTimeout()은 타이머(Timer) 기능을 한다고 보면 됩니다. 말 그대로 '타임 아웃!' 되는 순간을 세팅해두는 것이죠.

기본적인 사용문법은 다음과 같습니다.

setTimeout(() => {
        실행할코드
      }, 지연시간);
    
    
setTimeout(() => {
        console.log("1초 후 안녕!");
      }, 1000);

 

화살표 함수의 기초는 다른 포스팅에서 다뤘습니다. 화살표 부분이 어색하다면 한번 읽어두시면 좋습니다.

 

화살표 함수 기초 개념 정리 - Arrow Function

화살표 함수 기초 개념 정리 - Arrow Function

 

위 코드를 실행하면, 1초가 지난 후에 "1초 후 안녕!" 이라는 문자열이 콘솔에 찍히게 됩니다.

1000이라는 단위는 밀리세컨드 단위라서 1초를 의미합니다.

 

setTimeout()은 타이머 기능입니다.

 

 

그렇다면, 다음과 같은 코드를 실행하면 콘솔에 어떻게 찍어줄까요?

setTimeout(() => {
  console.log("1초 후 안녕!");
}, 1000);

setTimeout(() => {
  console.log("2초 후 안녕!");
}, 2000);

setTimeout(() => {
  console.log("3초 후 안녕!");
}, 3000);

 

각 행을 읽는 순간, 각각 1초짜리, 2초짜리 ,3초짜리 타이머가 켜지게 되면서 해당 시간에 도달하는 경우, 괄호만 쓰여져 있는 콜백함수가 실행 되는 방식입니다. 쉽죠?^^

 

지연시간에는 밀리세컨즈가 사용됩니다.

 

그러면 다음과 같이 작성된 코드는 어떻게 동작할까요?

setTimeout(() => {
  console.log("콘솔에 1 찍기");
}, 2000);

setTimeout(() => {
  console.log("콘솔에 2 찍기");
}, 1000);

 

당연하게도, 실행 1초 후에 "콘솔에 2 찍기"가 먼저 실행이 되고, 이후 2초 후에 "콘솔에 1 찍기"가 실행됩니다.

각각 세팅되어 있는 시간에 도달하면 실행이 됩니다.

 

사실 여기까지만 기억하면 setTimeout()은 거의 다 이해를 한 것이라고 봐도 무방합니다. 그런데, 짝궁처럼 사용되는 clearTimeout() 이라는 녀석을 함께 기억해주면 더 좋습니다.

 

 

 

clearTimeout() 기본 동작 방식

 

clearTimeout()은 setTimeout()으로 설정한 '타이머'를 제거해주는 기능을 합니다. 셋타임아웃으로 생성한 타이머들은 우리 눈에는 보이지 않지만, 메모리 어딘가에는 존재하고 있거든요. 그래서 clearTimeout()으로 생성만 하는 경우, 해당 프로그램이 계속 반복 사용이 되면, 메모리 안에 타이머가 수천개 수만개 남게 되면서 에러를 발생시킬 수 있게 됩니다.

 

또한 반복문이나 조건문을 통해 setTimeout()으로 타이머를 생성해둔 경우에는 반복되는 시점에서 타이머에 담긴 값이 달라져 있을 수도 있는 것이구요. 그래서 카운트 변수 초기화의 목적처럼, 사용 후에는 타이머들도 싹 제거해주는 것이 좋습니다.

 

clearTimeout()을 사용하기 위해서는 다음과 같이 setTimeout()을 변수에 담아주게 됩니다.

let timer = setTimeout(() => {
  실행할 코드;
}, 지연시간);

clearTimeout(timer);

 

clearTimeout() 함수에 인자로 받은 녀석의 타이머를 제거해주는 역할인거죠. 알보 보면 이것도 역시 간단한 것 같습니다.^^

 

그렇다면 다음 코드는 어떤 결과를 내놓을까요? 한번 생각해본 후에 스크롤을 내려보세요.

(코딩 초보자라면, 이 내용은 진짜로 한번쯤 생각해보는 것이 아주 중요합니다!)

let timer = setTimeout(() => {
  console.log("콘솔에 1 찍기");
}, 1000);


clearTimeout(timer);
console.log("콘솔에 2 찍기");

 

크롬브라우저에서 F12를 누르고 개발자모드 콘솔창에서 한번 붙여 넣고 엔터를 쳐보세요.

콘솔에 1 찍기는 출력되지 않습니다.

 

"콘솔에 1 찍기"는 출력이 되지 않습니다.(혹시 출력되기를 예상하신 건 아니죠?)

 

위 코드를 실행하면 타이머가 막 세팅이 되고 나서 1초에 도달하기 전에, clearTimeout()이 timer 변수에 담긴 타이머를 제거해버리게 되서 그렇습니다. 생각해보면 당연하겠죠?

 

 

마무리

 

setTimeout()과 clearTimeout()은 짝궁처럼 사용된다고 기억하시고, 일정 시간 간격으로 실행하는 함수로는 setInterval()을 함께 공부해두시면 좋습니다. 그리고 javascript에서의 타이머 기능은 포스팅에서 살펴본 대로만 사용되는 것은 아니고, 반복문이나 조건문을 통해서 더욱 복잡하게 사용되어지기도 합니다.

 

하지만 기본적인 동작방식과 원리를 이해하고 기억한다면, 저도 다음부터는 참조없이 바로바로 프로젝트에 잘 활용할 수 있겠다는 생각이 듭니다.

 

 

즐거운 코딩생활, 즐코딩.

KINcoding.