[javascript] setTimeout 자세히알기(2) 부제: 자바스크립트 런타임

자바스크립트 런타임 구성요소

setTimeout 의 콜백함수가 delay시간 이후에 정확하게 호출되지 않는 이유는 자바스크립트 런타임 구성요소를 알아야 이해가 쉽다.

 

자바스크립트는 기본적으로 싱글 스레드 이므로 한개의 작업만을 다룰 수 있다. 그렇기 때문에 하나의 프로그램에서 동시에 하나의 코드만 실행할수있다. 

 

1) Call Stack

 자바스크립트 메서드 호출 시 실행 순서대로 call stack에 쌓이게되고(push), 함수 실행이 완료되면 스택에서 제거된다.(pop)(선입선출)

setTimeout도 호출되면 callStack에 먼저 쌓이게된다. 이후 호출은 완료되었기 때문에 stack에서 지워지게된다. 

 

2) Callback Queue

 

WebAPI의 콜백이 쌓이는 곳이다. 설정했던 delay시간이 지나고 나면 setTimeout의 콜백이 쌓이게 된다.

Web API는 자바스크립트가 실행되는 런타임 환경에 존재하는 별도의 API 이다. (V8 소스코드에는 존재하지 않는다.) ex) setTimeout, setInterval, setImmediate 등..

 

3) Event Loop

이벤트 루프는 콜 스택이 빌 때까지 기다린 후 콜백 큐에 있는 콜백을 콜 스택에 넣어주는 역할을 한다. 

 

다시 한번 설명하면 1. setTimeout이 실행된 시점에 Call Stack에 setTimeout이 쌓이게 되고, 호출이 완료된 후 제거된다.

2. 호출 이후 지정한 delay시간이 지나고나면 setTimeout의 콜백함수가 Callback Queue에 쌓이게 된다.

3. 이벤트 루프는 콜스택이 비게되면 콜백 큐에 있는 콜백함수를 Call Stack에 넣어준다.

 

이때 Call Stack에 다른 할일이 많이 쌓여있다면 콜백함수가 호출되는 시점은 더 늦어질 것이다. 그렇기 때문에 setTimeout으로 지정한 delay시간이 지나고 나서 지연시간이 생기게 된다.