Event loop로 알아보는 setTimeout과 setInterval의 정확성

안녕하세요 SOPT 웹파트 36기 YB 고제성입니다!

 

이번 과제 요구사항에

시도 횟수가 10번이 넘어가면, 5초후 게임을 초기화 한다.
정답을 맞춘 경우 3초후 게임을 초기화 한다.

 

와 같이 시간과 관련된 요구사항이 있었는데 

저는 게임을 초기화하고 다시 시작하는 구문을 함수로 만들어
 setTimeout(() => initGame(), 5000); 

이런 방식으로 해결했습니다!

 

setTimeout()과 비슷한 역할을 하는 setInterval()이라는 함수도 있는데, 이 두 함수의 차이점과 정확성에 대해 알아보면서 javascript의 이벤트 루프에 대해 얘기해보려고 합니다.

 

setTimeout vs setInterval

setTimeout은 지정된 시간(밀리초) 후에 함수를 한 번만 실행하는 타이머 함수입니다.

setTimeout(callbackFunction, delayTime);

setTimeout(() => {
  console.log("2초가 지났습니다!");
}, 2000);

setInterval

setInterval은 지정된 시간 간격마다 함수를 반복적으로 실행하는 타이머 함수입니다.

setInterval(callbackFunction, intervalTime);

const intervalId = setInterval(() => {
  console.log("1초마다 실행됩니다!");
}, 1000);

// 나중에 중지하고 싶을 때!
clearInterval(intervalId);

 

그렇다면 이 시간을 다루는 두 함수의 타이머는 항상 정확할까요?

// 시작하는 시점의 기준 시간 등록
const startTime = Date.now();

// 1초 후에 setTimeout 함수 실행
setTimeout(() => {
    console.log(`Callback 1 executed at ${Date.now() - startTime}ms`);
}, 1000);

setTimeout(() => {
    console.log(`Callback 2 executed at ${Date.now() - startTime}ms`);
}, 1000);

setTimeout(() => {
    console.log(`Callback 3 executed at ${Date.now() - startTime}ms`);
}, 1000);

 

각 콜백 내부에서 시작 시간과 현재 시간 사이의 차이를 구해서 각 콜백이 얼마나 정확한 시간에 실행되는지 확인해볼 수 있는 코드입니다

현재 티스토리 블로그를 작성하면서 콘솔에서 확인해본 결과

이런식으로 1~2ms씩 밀려서 실행되는 걸 확인할 수 있습니다.

 

이렇게 정확하지 못한 타이머는 javascript의 이벤트 루프 특성 때문인데요!

사진은 javascript의 실행 환경을 나타낸 이미지인데요

이미지를 보면 알 수 있듯, setTimeout과 같은 함수는 Web API라는 곳에서 실행됩니다.

 

이러한 실행 환경에서 setTimeout()함수의 작동 방식은

1. 타이머 함수가 call Stack에서 실행

2. Web API에서 타이머 설정

3. 타이머 시간이 지나면 콜백 함수가 태스크 큐에 추가

4. 이벤트 루프는 콜 스택이 비었을 때 태스크 큐에서 대기 중인 콜백 함수를 콜 스택으로 이동

-> 이 모든 과정을 지나서야 실행!

 

 

위의 코드를 예시로 설명하자면

javascript 파일이 1000ms 후에 함수가 작동하도록 Web API에 요청을 하면,

Web API는 1000ms를 기다린 후에 작동시킬 함수를 task queue에 전달합니다

하지만, task queue에서 작업을 하고 있는게 있다면, event loop는 task queue에서 대기하는 명령을 바로 call stack으로 전송하지 못하고 대기하게 됩니다!

 

 

그렇다면 왜 아까 예시로 들었던 코드의 첫 setTimeout()은 1000ms후에 바로 실행되지 않았냐? 라는 궁금증이 생겼는데요,

위에서 설명드렸던 task queue delay 이슈를 제외하더라도

- 브라우저의 최소 지연 시간 제한

- 이벤트 루프의 틱(tick) 타이밍

- javascript의 엔진 정밀도

등 다양한 원인들이 있을 수 있다고 합니다!!

 

리심스 과제를 하면서 접하게 된 javascript의 이벤트 루프와 과제에서 사용한 setTimeout함수의 연관성에 대해 공부하면서 실제 예시로 이벤트 루프를 더 깊게 이해할 수 있었던 좋은 기회였던 것 같습니다!👍👍👍