setTimeout은 무조건 지정된 시간 이후에 실행될까?

🧙‍♀️ 호기심

얼마전 인터뷰를 하면서 받은 질문이 있었다.

이벤트 루프와 관련된 인터뷰를 하면서 받은 질문이였는데,

setTimeout(() => {
  console.log('실행')
}, 60초)

setTimeout은 딱 60초뒤에 무조건 실행되나요?

내가 대답한 답변은

아니요

였다.

😂 자신없는 “아니요”의 근거

자바스크립트는 기본적으로 싱글스레드이다. 하나의 작업영역인 Stack에 작업이 쌓이고, 선입 후출의 방식으로 처리가 된다.

그 중에서도 setTimeout, Promise, Callback함수 등의 비동기 webApi 들은 호출이 되면, 백그라운드 영역에서 필요한 시간 혹은 지정된 시간이 소모된 후 Que 자료구조에 이후의 콜백함수들이 담기게 된다.

각각의 task, microTask의 자료구조에 담기게 되고, Promise의 콜백함수가 담기는 microTask의 Que 자료구조가 선입선출의 방식으로 task보다 먼저 실행된다.

이렇게 메인스레드가 비어있음을 감지한다음 다음 que의 작업을 위해 우선순위를 판별하고 작업을 옮겨주는것이 EventLoop였다.

내가 알기론 이렇다..

따라서, 우선순위에서 밀리게되거나, 여러개의 작업이 que에 중첩이되게 된다면, 어떤 경우는 지정된 시간에 딱 수행되지는 않을것 같다 라는 답을 하였다.

🥵 과연 맞을까?

당연히 인터뷰에서 나의 답변이 정답인지 아닌지는 얘기해주시지 않았다.

그래서 궁금증에 한번 실험을 해보았다.

🔮 setTimeout 실험

참고로 이 실험의 정확성은 제로입니다. 극히 주관적인 생각이 담겨있습니다.

setTimeout(() => {
  console.log(`첫번째 setTimeout 실행시간 : ${new Date().getTime()}`)
}, 0)
setTimeout(() => {
  console.log(`두번째 setTimeout 실행시간 : ${new Date().getTime()}`)
}, 0)
console.log(`스크립트가 읽힌 시간 : ${new Date().getTime()}`)

🍯 조건

• 두가지의 setTimeout은 모두 0초 뒤에 실행되도록 하며, 실행할 때 실행된 시간을 알려준다.

  주관적으로 0초면 사용자의 입장에서 즉시실행이나 다름없다고 생각하였음. 물론, 자바스크립트에서는 아니겠지만

• 동일한 지연시간을 갖고있는 두개의 setTimeout을 통해, 똑같은 0초를 지정했을 때, 실행시간의 차를 확인하고자 함.

  만약, 두개의 실행시간이 다르다면 무조건 정해진 시간(0초) 뒤에 실행된다는 보장은 없다고 생각됨

• 스크립트가 읽힌 시간과 첫 setTimeout이 실행된 시간이 다르다면 첫 setTimeout 또한, 바로실행(0초 뒤 실행)이 아니라고 생각됨
• 물론, 개발자의 입장에서 비동기 Api는 메인스레드가 아닌 백그라운드에서 별도로 실행된 후, 메인스레드에서 모든 작업이 완료된 다음 콜백함수가 실행된다는 점에서 늦게 호출된다는것은 당연하지만, 사용자의 입장에서 0초는 사실 즉시라는것을 생각하고 테스트하였음.

🚀 결과

모든 시간이 다르다는 결과가 나옴.

사실 여러번 새로고침해서 나온 결과긴 하다. 하지만, 애초에 절대 라는 수식어가 붙은 시점에서 단 한번의 예외적인 결과가 나오더라도 그 의미는 퇴색되는것이기 때문에 상관없다고 본다.

즉, setTimeout은 지정된 시간에 무조건적으로 실행되는것이 아니라, 상황에 따라 시간이 조금 밀릴 수 있다는 점.

🍑 MDN의 의견

MDN에서 setTimeout과 관련하여 확인할 수 있는 글이 있었다.

실행은 que에 대기중인 작업 수에 따라 다릅니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다.

기본적으로 setTimeout은 setTimeout에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다.

🧑‍⚖️ 결론

setTimeout의 지정된 시간은 콜백함수가 실질적으로 호출되는 지연시간이 아니라, 요청을 처리하기 위해 필요한 최소의 시간이며, que에 중첩된 여러 작업과 같이 상황에 따라 대기시간으로 인해 지연될 수 있다.

아마 Promise와 같은 비동기 Api들도 비슷한 결과일 것 같다.

이처럼 최대한 예상된 시간에 결과물을 확인할 수 있도록 debounce와 throttle을 통해 비동기함수들이 중첩되는것을 제어하는것이 아닌가 싶다.

답변은 잘 한거겠지?