Why browser timers drift, and how an online countdown stays accurate

A browser timer stays accurate when it reads the clock, not when it counts ticks. Save the end time when the timer starts, then subtract the current time each time the screen updates. Ticks can arrive late, or be slowed in a background tab, but the subtraction is still correct the moment the page checks it.

Online timerNeed a timer or stopwatch?Open

Why counting ticks drifts

A common way to write a timer is to subtract one from a counter every second. The browser runs that step with a repeating timer, which asks for a function to run every so many milliseconds. The browser does not promise exact timing. A busy page, a slow device or a hidden tab can delay each tick, and the delays add up. A counter that loses a few milliseconds per tick is visibly wrong after a few minutes.

What hidden tabs do

Browsers slow down timers in tabs you are not looking at. This saves battery and processor time. Chrome, for example, limits how often repeating timers run in a hidden tab, and after a tab has been hidden for a long time, those timers can run much less often. A counter in such a tab falls behind, which is why a countdown that counts ticks can finish late.

Reading the clock instead

The fix is to record when the timer started and when it should end. The browser provides a high-resolution clock, performance.now(), intended for measuring intervals. When the display updates, the timer computes the remaining time as the end time minus now. A late update shows a slightly stale number for a moment, but the next update corrects it, because the calculation does not depend on how many ticks ran.

Pausing stores the remaining time. Resuming sets a new end time as now plus the remaining time, so the pause does not disturb the count.

The page also sets one timer for the moment the countdown should end. The alert is then not left waiting for the next display update, even if the display is delayed.

Why the display rounds up

A countdown shows the time left rounded up to the next whole second. A three-second timer reads 00:03 at the start, 00:02 and 00:01 as it runs, and 00:00 when it finishes. Rounding down would show 00:00 for the final second, which feels one second early. A kitchen timer reads the same way.

Sound and the screen

The tone is generated by the browser's audio system, so no audio file is downloaded. Browsers allow sound only after a user action on the page, so the audio is prepared when you press Start. Your device volume and mute settings still apply.

The screen wake lock is optional. Where the browser supports it, the page can ask the device to keep the screen on while the timer runs. The browser releases the lock when the tab is hidden, so the page asks again when you return.

What a stopwatch lap measures

A stopwatch adds up the stretches of time it has been running, and pausing stops that sum. The total is the time since the start, and a lap is the change in the total since the previous lap. Lap 1 time equals the first total. Lap 2 time equals the second total minus the first. The display shows hundredths of a second, but the timing is limited by the device and the browser, so treat the last digit as approximate.

Practical checks

• Test a short timer against a watch before you rely on it for cooking or a workout. A 30-second test is enough to see whether the device behaves.
• Keep the volume up, and check that the device is not on silent.
• A timer keeps accurate time while its tab is hidden, but closing the tab or reloading the page resets it.
• If a laptop sleeps during a countdown, check the remaining time when it wakes, because the behaviour during sleep depends on the device and browser.

Edge cases

• Clock changes. A countdown measures elapsed time, not the wall clock, so daylight saving changes do not affect it.
• Long timers. A timer for several hours is still accurate, but check that the device has not gone to sleep in the meantime.
• More than one timer. Each timer keeps its own end time, so two timers in two tabs do not interfere.

Quick answers

Why does a timer run late in a background tab? Browsers slow repeating timers in hidden tabs, so a timer that counts ticks falls behind. A timer that reads the clock does not.

Will the timer be right when I come back to the tab? Yes. It shows the time left from the saved end time.

What is the difference between a lap and a total? A lap is the time since the previous lap. The total is the time since the stopwatch started.