Back to articles
Building a Reliable Countdown Timer Is Harder Than It Looks

Building a Reliable Countdown Timer Is Harder Than It Looks

via Dev.to WebdevMichael Lip

A countdown timer sounds like a beginner JavaScript project. Set an interval, decrement a number every second, display it. Three lines of code. Ship it. Then you discover that setInterval drifts, the timer loses sync when the tab is backgrounded, and your "1 second" intervals are actually 1.002 seconds, accumulating to minutes of error over long countdowns. Building a timer that actually works requires understanding how JavaScript handles time. Why setInterval drifts The fundamental problem is that setInterval does not guarantee timing precision. When you call setInterval(callback, 1000) , you are saying "run this callback approximately every 1000 milliseconds, but not sooner." The browser's event loop, other tasks, garbage collection, and tab throttling all delay execution. // The naive approach - DO NOT USE for anything that matters let remaining = 3600 ; // 1 hour setInterval (() => { remaining -- ; display ( remaining ); }, 1000 ); Over an hour, this timer might be off by 10-30 sec

Continue reading on Dev.to Webdev

Opens in a new tab

Read Full Article
2 views

Related Articles