setTimeout을 신뢰할 수 없는 이유

JavaScript의 setTimeout은 밀리초 단위로 시간이 걸리므로 매우 정확해야 합니다.

글쎄요. 이 기사에서 그 이유를 알아보자.

JavaScript가 단일 스레드라는 것은 모두 알고 있습니다. 한 번에 한 가지만 계산할 수 있음을 의미합니다.
그러나 이제 10000ms 또는 10초 후에 실행되는 setTimeout이 있다고 상상해 보십시오. 이제 JS는 경과된 시간을 추적해야 합니다. 그러나 그 10초 사이에 사용자는 페이지와 상호 작용할 수 있습니다. 이제 JavaScript도 이에 반응해야 합니다.

그러나 JavaScript가 단일 스레드인 경우 사용자 활동에 반응하는 동안 어떻게 경과 시간을 추적할 수 있습니까? 동시에 여러 계산을 수행하는 것입니다.
JavaScript가 시간을 추적하지 않기 때문에 그렇지 않습니다. 사실 JavaScript는 기본적으로 setTimeout도 지원하지 않습니다. 그러면 어떻게 setTimeout을 사용할 수 있습니까? setTimeout, setInterval과 같은 이러한 특수 비동기 함수는 현재 실행 중인 환경에서 JS에 제공됩니다. 예를 들어 Chrome의 경우 JavaScript는 V8 엔진에서 실행되고 Fire Fox는 JavaScript 엔진으로 SpiderMonkey을 사용합니다.

따라서 기본적으로 setTimeout을 호출하면 후드 아래의 JavaScript는 환경/엔진에 실행 중인 모든 동기 코드가 완료되면 타이머를 설정하고 타이머가 지정된 시간에 도달하면 함수를 실행한다고 알려줍니다.
이제 "모든 동기 코드 실행이 완료되면"이라고 말했습니다. 그리고 여기에 문제가 있습니다. setTimeout의 타이머는 DOM 조작, 루프 등과 같은 모든 일반 동기 코드가 완전히 실행되지 않을 때까지 시작되지 않습니다.
그리고 이러한 동기 코드는 실행하는 데 시간이 걸릴 수 있습니다.
다음은 실행하는 데 몇 밀리초가 걸리는 더미 코드입니다.

//JS hack: +new Date() will give you current time in milliseconds 😉
let currentTime = +new Date()
//Dummy long loop
for(let i = 0; i < 999999999; i++){}
//Current time after the loop is over
let endTime = +new Date()
console.log("Ran after: " + (endTime - currentTime) + "ms")

따라서 50ms 후에 실행되는 것으로 가정하는 코드에 setTimeout이 있는 경우 몇 밀리초 늦게 실행될 수 있습니다.

let currentTime = +new Date()
setTimeout(function(){
    let endTime = +new Date()
    console.log("Ran after: " + (endTime - currentTime) + "ms")
}, 50)
for(let i = 0; i < 99999999; i++){

}

결론

Although setTimeout is fine to use most of the time, but for very time sensitive task it might not be the ideal choice

내 다른 기사를 확인하고


.ltag__user__id__728097 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

슈보 팔로우

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

도움이 되었습니까? Patreon에서 저를 지원해주세요