Browser Timers in Background Tabs, Locked Phones, and Closed Tabs

Switching to another tab normally changes the document visibility state from visible to hidden. The page may remain loaded, but browsers conserve power by throttling background callbacks. A callback requested for a particular delay is a request to run no earlier than that delay, not a guarantee of an exact appointment. A busy event loop can also make it late.

This is why counting one second every time a one-second interval fires is fragile. If five callbacks are delayed, incrementing a counter only once would lose time. The production countdown route instead stores an end reading based on performance.now() and recomputes the difference on every animation frame. The stopwatch route and the shared elapsed-stopwatch hook use the same broad idea: elapsed time comes from the difference between monotonic readings, not from the number of paints received.

When the hidden page is allowed to run again, the next calculation can jump directly to the current remaining or elapsed value. The display may appear to skip numbers because intermediate frames were never rendered. That visible jump is preferable to a timer that falls behind.

Chrome's lifecycle documentation states that frozen pages do not start freezable tasks such as JavaScript timer callbacks. A discarded page runs no callbacks or JavaScript at all. Discarding can happen without a final event, so a page cannot reliably schedule one last action before every discard. Other browsers and mobile operating systems have their own lifecycle decisions, which is why this guide avoids promising one universal background duration.

Locking a phone can hide the page, suspend the browser process, freeze tasks, or place the device into a deeper power-saving state. The exact sequence depends on the browser, operating system, battery settings, memory pressure, and how long the phone remains locked. A page cannot force the operating system to keep its JavaScript and audio hardware active indefinitely.

If the page remains in memory, a duration-based implementation may reconcile its display when the screen is active again. If the browser discarded the page, revisiting the tab is a new load. iLoveTimers does not register a service worker or operating-system alarm that continues a countdown after the active document is gone. The tool should therefore remain visible and the device awake for time-sensitive use.

• The main countdown and stopwatch implementations measure against monotonic readings, which prevents ordinary callback delay from accumulating as interval drift.
• The shared stopwatch hook listens for visibilitychangeand immediately reconciles elapsed time when the page becomes visible.
• Current clocks derive their display from a fresh device-clock reading rather than adding one nominal second per callback.
• Some tools save settings or sessions in local storage, but saving data is not the same as keeping code running. The basic countdown does not promise to restore a running countdown after closure.
• No page can play its completion sound after its document and audio context have been terminated.

For a concrete duration, try the countdown timer. For elapsed measurement, use the stopwatch. Keep the relevant tab open for either one.

1. Keep the timer tab open and visible where practical.
2. Prevent the device from sleeping for a time-sensitive session.
3. Test sound with a direct click before relying on an audible alert.
4. Check system volume, the selected output device, silent modes, and browser site permissions.
5. Use an operating-system alarm or dedicated hardware as a backup when a missed alert could affect safety, cooking, medication, travel, an exam, or another important deadline.

These external references support the browser and standards behavior described above. iLoveTimers implementation details are identified separately in the guide.

• Chrome for Developers: Page Lifecycle API: defines hidden, frozen, terminated, and discarded page states and explains that JavaScript timers do not run while a page is frozen or discarded
• MDN: setTimeout(): documents late callbacks and browser-specific throttling in inactive tabs
• MDN: Page Visibility API: explains how documents learn that they have become hidden or visible