Timers

JavaScript Timers Overview

JavaScript timers allow code to execute after a specified delay or at repeated intervals. Timers are powered by browser or Node.js runtime APIs and are commonly used for animations, notifications, countdowns, auto-save, polling, slideshows, debouncing, and periodic data refresh.

The two primary timer functions are setTimeout() and setInterval(). Timers can be canceled using clearTimeout() and clearInterval(). Understanding timers is essential for asynchronous JavaScript, event loops, UI updates, and performance optimization.

JavaScript Timer Example

const timeoutId = setTimeout(function() {
  console.log("Runs once after 2 seconds");
}, 2000);

const intervalId = setInterval(function() {
  console.log("Runs every second");
}, 1000);

setTimeout(function() {
  clearInterval(intervalId);

  console.log("Interval stopped");
}, 5000);

This example uses setTimeout() for a one-time task, setInterval() for repeated execution, and clearInterval() to stop the repeating timer after five seconds.

Top 10 JavaScript Timer Examples

The following examples demonstrate the most common timer patterns used in modern JavaScript applications.

Popular Real-World JavaScript Timer Examples

These examples show how timers are commonly used in production applications for user interactions, live updates, animations, and background tasks.

Best Practices

• Use setTimeout() for one-time delayed tasks.
• Use setInterval() only for tasks that must repeat continuously.
• Always clear unused timers with clearTimeout() or clearInterval().
• Prefer recursive setTimeout() over setInterval() for API polling to avoid overlapping requests.
• Use requestAnimationFrame() for smooth browser animations.
• Store timer IDs so they can be canceled later.
• Keep timer callbacks lightweight to avoid blocking the UI.
• Use debouncing or throttling for high-frequency user events.

Common Mistakes

• Forgetting to cancel timers when they are no longer needed.
• Assuming setTimeout() runs exactly on schedule.
• Using setInterval() for slow API requests that may overlap.
• Creating multiple intervals accidentally.
• Passing the result of a function instead of the function itself.
• Using timers for animations instead of requestAnimationFrame().
• Ignoring timer cleanup when components or pages are destroyed.

Key Takeaways

• setTimeout() executes code once after a delay.
• setInterval() executes code repeatedly until canceled.
• clearTimeout() cancels delayed execution.
• clearInterval() stops repeating timers.
• requestAnimationFrame() is preferred for browser animations.
• Always clean up timers to improve application performance.
• Timers are fundamental for asynchronous JavaScript and user interactions.