SetTimeOut 동작 방식

SetTimeout 내부 동작

console.log('Hi');

setTimeout(function cb() {
  console.log('there');
}, 5000);
console.log('JS');

위의 코드를 실행하면서 setTimeout 내부동작에 대해 알아보자

• 우선 맨 처음 hi를 출력할 때 스택과 콘솔은 다음과 같다.

• hi를 출력하고 setTimeout을 실행한 뒤 스택 변화는 다음과 같다.
  • 당연히 hi 출력문 다음인 setTimeout이 스택에 들어간다.

• 그리고 setTimeout을 실행하면 5000ms 동안 webapis에서 대기한다.

console.log('there')은 timer가 종료된 후 실행될 것이다.

다음 마지막 출력문을 실행하면 스택과 출력문은 다음과 같다.

그 후 스택이 모두 비워지게 되고, timer가 종료되면 이제 task queue에 들어가 실행 대기를 한다.

그리고 이제 큐에서 스택으로 올라가 실행하게 된다.

그렇다면 setTimeout을 0ms로 설정하면 대기하지 않고 바로 실행이 될까??

console.log('Hi');

setTimeout(function cb() {
  console.log('there');
}, 0);
console.log('JS');

• 정답은 '그렇지 않다.' 이다

  • setTimeout이 스택에 올라가면, cb함수는 timer가 실행되고, 0ms초 후에 바로 task queue에 들어간다.

  • 그리고 이 task queue의 값들은 스택이 모두 비워진 다음에 들어갈 수 있다.

  • 즉, console.log( 'JS' ); 까지 완료 되어야, cb함수가 실행된다.