호출 스케쥴링

함수를 명시적으로 호출하면 함수가 즉시 실행된다. 근데 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이 후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.

타이머 함수는 ECMAScript사양에 정의된 빌트인 함수가 아니지만 브라우저 환경과 Node.js환경에서 모두 전역객체의 메서드로서 타이머 함수를 제공하는 호스트 객체이다.

setTimeout/clearTimeout

이 setTimeout은 2번째 인수로 전달받은 시간으로 한번만 동작하는 타이머를 생성하고 타이머가 만료되면 첫 번째 인수로 전달받은 콜백함수가 호출되는 것이다.

setTimeout(() => console.log('Hi!'), 1000);


setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee');


setTimeout(() => console.log('Hello!'));

그리고 clearTimeout을 이용하면 호출 스케줄링을 취소한다.

const timerId = setTimeout(() => console.log('Hi!'), 1000);


clearTimeout(timerId);

setInterval/ clearInterval

setInterval함수는 두 번째 인수로 전달받은 시간으로 반복 동작하는 타이머를 생성한다. 이후 타이머가 만료될때마다 콜백함수가 반복 호출되고 clear하려면 clearInterval함수를 사용한다.

let count = 1;


const timeoutId = setInterval(() => {
  console.log(count); // 1 2 3 4 5

  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

이때 어떻게 이렇게 동작하는 걸까? 자바스크립트 엔진은 싱글 스레드로 동작하고 있다. 하지만 자바스크립트 엔진만 싱글 스레드이지 브라우저는 싱글 스레드가 아니다.

브라우저도 싱글 스레드면 이벤트나 이런 타이머 함수 즉 비동기적으로 못한다.

즉 우리가 비동기때 공부해야하지만 조금 이야기를 하자면 이 타이머 함수 즉 비동기를 등록을 하면 즉시 호출이 되는게 아니라 테스크 큐에 저장이 되고 우리의 실행 컨텍스트 스택이 비어질때까지 기다렸다가 비어졌으면 그때 들어가게 된다.