카운트다운 타이머
시, 분, 초를 설정하고 카운트다운을 시작하면 0이 되었을 때 명확한 알림음이 울립니다 — 백그라운드 탭에서도 작동합니다.
조회수 1,048회
카운트다운이 정확하게 유지되는 원리
setInterval이 실행될 때마다 누적된 총 시간에서 1초씩 빼는 카운트다운은 단순해 보이지만, 시간이 지나면 정확하지 않습니다. 매 틱(tick)마다 정확히 1000밀리초가 지났다고 가정하지만, 실제로는 브라우저의 이벤트 루프가 바빠질 수 있습니다 — 다른 스크립트, 애니메이션, 혹은 백그라운드 탭 등의 이유로 — 그러면 틱이 몇 밀리초씩 늦게 실행됩니다. 이런 작은 지연들이 누적되면 눈에 띄는 오차가 됩니다: 이런 방식으로 만든 10분짜리 타이머는 0에 도달할 때쯤 몇 초 일찍 끝나거나 늦게 끝날 수 있습니다.
이 도구는 다른 방법으로 이 문제를 피합니다: 시작을 누르는 순간 고정된 목표 타임스탬프 — 현재 시각에 선택한 시간을 더한 값 — 를 계산하고, 매 틱마다 누적된 총합에서 거꾸로 세는 대신 그 목표까지 얼마나 남았는지만 묻습니다. 남은 시간이 항상 두 개의 실제 시계 값에서 다시 계산되기 때문에, 누적된 틱 지연은 자동으로 상쇄됩니다 — 개별 틱이 늦게 실행되더라도 표시되는 시간은 정확하게 유지됩니다.
알아두어야 할 점
측정 중인 탭이 백그라운드에 있으면, 브라우저는 배터리와 CPU를 절약하기 위해 타이머를 종종 제한(throttle)하여 요청보다 덜 자주 실행합니다. 목표 타임스탬프 방식은 이 문제도 우아하게 처리합니다: 얼마나 많은 틱이 건너뛰어졌는지는 중요하지 않습니다. 카운트다운은 다음에 실행될 때마다 실제 목표 시각과 실제 현재 시각을 다시 비교하기 때문에, 그 사이 탭이 아무리 제한되었더라도 정확한 순간에 0에 도달합니다.
- 알림음은 Web Audio API의 오실레이터 노드로 즉석에서 생성됩니다 — 로드해야 할 오디오 파일이 없으므로 재생 전에 지연이 없습니다.
- 브라우저 탭 제목이 남은 시간으로 업데이트되므로, 다른 탭을 보고 있어도 카운트다운을 확인할 수 있습니다.
- 일시정지하면 남은 시간을 저장해 두었다가 재개할 때 새로운 목표 타임스탬프를 다시 계산하므로, 일시정지와 재개 역시 오차를 만들지 않습니다.
자주 묻는 질문
다른 탭에 있어도 알람이 들리나요?
네 — 브라우저 탭 자체가 닫히지 않고 열려 있는 한, 어느 탭이 활성화되어 있든 이 탭에서 알림음이 재생됩니다.
노트북이 절전 모드에 들어가면 카운트다운이 일시정지되나요?
다른 브라우저 타이머와 마찬가지로 시스템과 함께 일시정지됩니다 — 기기를 깨웠을 때 목표 시각이 이미 지났다면 즉시 0을 표시하고 알림이 울립니다.
분뿐만 아니라 시간도 설정할 수 있나요?
네 — 시, 분, 초를 모두 설정할 수 있어 10초짜리 알림부터 몇 시간짜리 카운트다운까지 모두 가능합니다.
타이머가 긴 시간 동안에도 정확도를 유지하는 이유는 무엇인가요?
개별 틱을 누적해서 더하지 않기 때문입니다. 시작을 누를 때 고정된 목표 타임스탬프 하나를 계산하고, 매 틱마다 "목표 − 현재"를 다시 계산하므로 특정 틱 하나가 지연되더라도 최종 결과에는 영향이 없습니다 — 타이머는 여전히 정확한 순간에 0에 도달합니다.
백그라운드 탭에서의 제한(throttling)이 카운트다운을 흐트러뜨리나요?
아닙니다. 브라우저는 전력 절약을 위해 비활성 탭의 타이머 속도를 늦추므로 틱이 덜 자주 실행될 수 있지만, 매 틱이 지나간 틱 수를 세는 대신 실제 목표 타임스탬프로부터 남은 시간을 다시 계산하기 때문에 카운트다운은 여전히 실제 시간 기준으로 정확한 순간에 0에 도달합니다.
비슷한 도구
문제 신고하기
카운트다운 타이머
댓글
아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!