[JavaScript] setTimeout은 현재 실행 중인 스크립트의 처리가 종료된 이후에 실행된다!

문제: setTimeout 은 무엇을 보여줄까요?

아래 코드에선 setTimeout을 이용해 호출을 스케줄링하고 있습니다. 그런데 그 아래 코드에선 실행 시간이 100ms 이상 걸리는 무거운 작업을 하고 있네요.

이런 경우 setTimeout에 넘겨준 함수는 언제 실행될까요?

1. 반복문 실행 후
2. 반복문 실행 전
3. 반복문이 실행되는 시점

얼럿창엔 어떤 값이 출력될까요?

let i = 0;

setTimeout(() => alert(i), 100); // ?

// 아래 반복문을 다 도는 데 100ms 이상의 시간이 걸린다고 가정합시다.
for(let j = 0; j < 100000000; j++) {
  i++;
}

---

내가 쓴 답안(틀림)

답: 1번 반복문 실행 전. 그래서 0이 출력된다.

이유: delay가 0일 때만 현재 실행 중인 스크립트의 처리가 종료된 이후에 스케줄링 함수 실행되는 거 아닌가?

---

공식 답안

setTimeout은 현재 실행 중인 코드의 실행이 종료되었을 때 실행된다.

반복문 실행이 종료되고 난 후 i는 100000000이 되므로, 얼럿창엔 100000000이 출력됩니다.

---

개념 정리

setTimeout과 setInterval, 즉 스케줄러는 현재 실행 중인 스크립트의 처리가 종료된 이후에 스케줄링한 함수를 실행한다. (delay와 상관 없다!) 이런 특징을 이용하면 현재 스크립트의 실행이 종료된 ‘직후에’ 원하는 함수가 실행될 수 있게 할 수 있습니다.

 

 

참고 문서: 

https://ko.javascript.info/settimeout-setinterval

setTimeout과 setInterval을 이용한 호출 스케줄링