왜 setTimeout과 setInterval은 정확한 시간을 보장하지 않을까?

[yunseorim1116]

setTimeout과 setInterval, 두 가지 메서드는 항상 정확한 시간에 실행되는 것은 아니라는 점을 아셨나요?

JavaScript의 싱글 스레드 모델

JavaScript는 싱글 스레드 언어입니다. 이말은 즉, 한 번에 하나의 작업만 수행할 수 있다는 것을 의미합니다. 이는 자바스크립트가 호출 스택(call stack)이라는 단일 실행 흐름에서 동작한다는 것을 의미합니다.

해당 API들은 JS엔진이 아닌 WebAPI라는 별도의 곳에서 처리를 합니다.

예를 들어 setTimeout으로 설정한 1초 후에 실행될 콜백이 있다고 가정해 보겠습니다.
만약 그 사이에 긴 계산 작업이 실행되고 있다면... 해당 작업이 완료될 때까지 setTimeout의 콜백 함수는 대기해야 합니다.
결과적으로 실제 콜백이 호출되는 시점은 예상보다 늦어질 가능성이 있습니다. (대-박)

최소 타이머 제한

현대의 브라우저는 타이머의 최소 지연 시간을 설정해 두고 있습니다. 대개 이 시간은 4ms입니다. 즉, setTimeout에 1ms를 설정하더라도, 실제로는 4ms 후에 실행될 수 있습니다. 이와 같은 제한은 시스템 자원을 최적화하고 너무 잦은 타이머 호출로 인한 성능 저하를 방지하기 위한 조치입니다.

따라서, 설정한 시간보다 실제 실행 시간이 길어질 가능성이 높습니다.

이벤트 큐와 호출 스택

JavaScript는 이벤트 기반 언어이기 때문에, 모든 비동기 작업(예: setTimeout, setInterval)은 이벤트 큐(event queue)에 등록됩니다. 이 큐는 실행할 준비가 된 작업을 대기시키는 공간입니다.

이벤트 큐에 있는 작업은 호출 스택이 비어 있어야만 실행됩니다. 만약 호출 스택이 다른 작업으로 바쁘다면, setTimeout이나 setInterval으로 설정한 콜백은 대기하게 됩니다. 이로 인해 실행 시점이 지연될 수 있습니다.

MDN

| 실행은 que에 대기중인 작업 수에 따라 다릅니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다. 기본적으로 setTimeout은 setTimeout에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다.

결론

setTimeout과 setInterval은 항상 정확한 시간에 실행된다는 보장은 없습니다. JavaScript의 싱글 스레드 모델, 최소 타이머 제한, 이벤트 큐의 대기 상태, CPU 부하 및 비활성 탭의 최적화 등 다양한 원인이 존재합니다.

그러니 정확한 시간 작업이 필요한 프로젝트엔 다른 방법을 고려해보는 것도 좋겠습니다.

레퍼런스

https://sirius7.tistory.com/156
https://ssocoit.tistory.com/249
https://sangmin802.github.io/Study/Think/setTimout/