타이머와 작업 큐

개념 이해하기

setTimeout은 최소 지연 시간 뒤 콜백을 task queue에 넣으며 정확한 실행 시각을 보장하지 않습니다. 현재 call stack과 앞선 작업이 끝나야 실행됩니다. 반환된 id를 clearTimeout에 전달해 아직 실행되지 않은 작업을 취소할 수 있습니다.

클릭 처리 함수는 1번 문구를 쓰고 타이머 두 개를 예약한 뒤 기다리지 않고 바로 2번 문구를 덧붙입니다. 두 번째 타이머는 clearTimeout(cancelled)로 실행 전에 취소되어 그 문구는 끝까지 나타나지 않고, 약 100밀리초 뒤 첫 번째 콜백이 3번 문구를 붙여 한 줄에 1, 2, 3 순서가 완성됩니다. 코드에서는 3번 콜백이 2번 문구보다 위에 적혀 있지만 실제로는 나중에 실행됩니다.

setTimeout의 세 번째 인수부터는 콜백에 그대로 전달되어 setTimeout(show, 100, 3)은 100밀리초 뒤 show(3)을 호출합니다. 같은 일을 반복하는 setInterval은 clearInterval로 멈추며, 브라우저는 백그라운드 탭의 타이머를 늦게 실행할 수 있으므로 경과 시간이 중요하면 performance.now()로 실제 시간을 다시 잽니다.