Stopped
Actual Timer
Updates every 1 second
00:00:00
True elapsed time — always accurate
Visual Timer
Updates every 2 seconds
00:00:00
Throttled display — syncs at even seconds
Lag
0.0s
max 2s

Live Timeline

Actual (1s) Visual (2s)

Why Two Update Rates?

This demonstrates a foundational engineering pattern: decoupling the data layer from the presentation layer.

Actual Timer — 1s

Runs in the background using Date.now() snapshots. Immune to drift even after pause/resume cycles because it calculates elapsed time from timestamps, not counter increments.

Visual Timer — 2s

Updates the DOM every 2 seconds to simulate throttled UI rendering — a pattern used in dashboards, monitoring tools, and high-frequency data apps to reduce unnecessary repaints.

Synchronization

The visual display reads from the same source of truth as the actual timer. It never drifts — it simply takes a snapshot of the actual elapsed time every 2 seconds.