자바스크립트 setTimeout 처리에 관해 질문드립니다.

Question

setTimeout(() => console.log('10ms'), 10); // (1) for(let i = 0; i < 2000000000; i += 1) {}; // long task (2) setTimeout(() => console.log('5ms'), 5); // (3)위의 코드를 실행했을 때는10ms 5ms로, 예상했던 대로 잘 출력됩니다.(예상)콜스택에 (1)이 push되고 pop된 후, timer api로 콜백함수가 전달됨(2)가 콜스택에 push 되고 실행되는 동안, (1)의 콜백함수 타이머가 완료되고, 해당 콜백함수가 태스크큐로 전달됨(2)가 끝나고, (3)이 콜스텍에 push 되고, pop 된 후, web api로 콜백함수가 전달됨콜스택이 비었으므로, 태스크큐에 있는 (1)의 콜백함수가 콜스택에 추가10ms 출력, 콜스택 비어짐(3)의 타이머가 끝나고, 태스크큐로 콜백함수가 전달되고, 콜스택이 비었으므로, (3)의 콜백함수가 콜스택에 푸시됨5ms 출력하지만,setTimeout(() => console.log('10ms'), 10); for(let i = 0; i < 2000000000; i += 1) {}; // long task setTimeout(() => console.log('0ms'), 0);으로, 0ms로 delay를 바꿀 때는 위의 로직과는 다르게0ms 10ms로 출력됩니다.혹시 이유를 아시는 분 계실까요?

Devvy · Answer

long task의 loop가 실행되는 와중에도 setTimeout(() &#61;> console.log(), 0)과 setTimeout(() &#61;> console.log(), 10) 의 코드도 실행될 수 있지 않나요 ?

songline · Answer

실험삼아 여러 브라우저와 node.js 에서 해당 코드를 실행시켜보았습니다.Edge: 0ms -> 10ms 순서로 나옴Chrome: 0ms -> 10ms 순서로 나옴Firefox: 10ms -> 0ms 순서로 나옴.node.js: 10ms -> 0ms 순서로 나옴.이를 보면 javascript 명세에 따른 현상은 아니고 웹 엔진을 최적화 하는 과정에서 발생한 일종의 부작용으로 추측됩니다. 0ms 로 setTimeout 을 지정하는 경우 web api 를 생략하고 바로 태스크 큐에 집어넣도록 되어있거나 그런 것이 아닌가 싶네요.

자바스크립트 setTimeout 처리에 관해 질문드립니다.

2개의 답변

Q&A 목록