Timer with JavaScript: Practical Patterns and Examples

Learn how to implement, manage, and clean up timers in JavaScript using setTimeout, setInterval, and requestAnimationFrame. This guide covers practical patterns, common pitfalls, and robust cleanup strategies for reliable timer-based logic.

JavaScripting Team

April 2, 2026·5 min read

JavaScript Tutorials Event Loop Loops Promises Async

JavaScript Timer Patterns - JavaScripting — Photo by darutplvia Pixabay

Quick AnswerDefinition

A timer with javascript is a pattern that schedules code to run after a delay or repeatedly at set intervals, using functions like setTimeout and setInterval. Timers can be canceled with clearTimeout or clearInterval, respectively. For smooth visuals, you can pair them with requestAnimationFrame. This article shows practical patterns, common pitfalls, and safe cleanup strategies.

What is a timer in JavaScript and when to use it

In JavaScript, a timer is a mechanism that defers execution of a function or runs it repeatedly after a fixed delay. This is essential for user-interface feedback, scheduling tasks, or polling for conditions without blocking the main thread. The most common timers are setTimeout for a single delay and setInterval for recurring ticks. When using timers, it's important to clean up to avoid memory leaks or stray callbacks after a component unmounts. Timers run on the event loop and do not block other work, making them suitable for simple delays, animations, or polling logic.

JavaScript

// One-off timer example
setTimeout(() => {
  console.log("5 seconds passed");
}, 5000);

JavaScript

// Cancel a pending timer if a condition changes
let timer = setTimeout(() => {
  console.log("This won\'t log if cleared early");
}, 3000);
clearTimeout(timer);

"If you're new to the event loop, timers are queued in the event queue and run when the call stack is free. This means you should not rely on exact timing for critical operations and instead design for drift-tolerant flows.

-spaceCount0-1? there is a stray dash

Steps

Estimated time: 60-90 minutes

1
Define the timer goal
Clarify whether you need a one-off delay, a recurring tick, or a visual progress animation. Decide how you will measure elapsed time and what should happen on completion.
Tip: Write a small pseudocode outline before touching code to avoid misplaced callbacks.
2
Implement a one-off timer
Use setTimeout for a delayed action. Store the timer id so you can cancel if needed. Ensure you handle cleanup to prevent callbacks after unmount or navigation.
Tip: Cancel timers on component unmount or navigation away.
3
Implement a repeating timer
Use setInterval to run a function at fixed intervals. Clear it when the work is done to avoid drift and memory leaks.
Tip: Prefer time-bound animation logic rather than busy polling.
4
Track elapsed time accurately
When precision matters, compute elapsed time using Date.now() or performance.now() and adjust for drift instead of relying solely on intervals.
Tip: Keep a running delta to correct drift when the timer fires late.
5
Add pause/resume functionality
Encapsulate timer logic in a small class. Pause should store remaining time and resume should re-arm the timer with the remaining amount.
Tip: Avoid creating new timers on every tick to reduce churn.
6
Synchronize with visuals using requestAnimationFrame
For progress bars or animations, pair timers with requestAnimationFrame to align updates with the browser frame rate.
Tip: Use rAF for fluid UI without unnecessary repaints.

Pro Tip: Use clearTimeout/clearInterval to stop timers and prevent leaks.

Warning: Timer precision is not guaranteed; design for drift and fallback paths.

Note: Always clean up timers on unmount and before navigating away.

Pro Tip: Prefer requestAnimationFrame for visuals over setInterval when animating.

Prerequisites

Required

Modern browser or Node.js (ES6+)↗
Required
Code editor (VS Code, Sublime Text, etc.)
Required
Basic understanding of functions and asynchronous concepts (Promises, callbacks)
Required

Optional

Optional: npm or yarn for dependency management
Optional

Keyboard Shortcuts

Action	Shortcut
Start a timerGeneric start action for a timer UI element	`Ctrl`+`⇧`+`S`
Pause timerPause ongoing timer to preserve elapsed time	`Ctrl`+`⇧`+`P`
Reset timerReset to initial state and clear previous callbacks	`Ctrl`+`⇧`+`R`
Clear timerAbort pending setTimeout/setInterval to avoid leaks	`Ctrl`+`⇧`+`C`

Questions & Answers

What is the difference between setTimeout and setInterval?

setTimeout schedules a single callback after a delay, while setInterval repeats the callback at a fixed interval until cleared. For precise control, you may need drift compensation or a wrapper that reschedules itself after completion.

How do I clean up timers when a component unmounts?

Store the timer IDs returned by setTimeout/setInterval and call clearTimeout/clearInterval in the cleanup phase (e.g., componentWillUnmount in class components or useEffect cleanup in React). This prevents callbacks from firing after the component is gone.

Can I use Promises with timers?

Timers and Promises can be combined by wrapping timer callbacks in Promise constructors or using async/await with a delay helper. This helps integrate timers into async flows without breaking the chain.

Is there a precise timer in JavaScript?

JavaScript timers are not precise to the millisecond due to the single-threaded event loop and browser/server load. Design for tolerance and use performance.now() for better measurement when needed.

How do timers differ between browser and Node.js environments?

Both environments provide setTimeout and setInterval, but Node adds unref/ref controls for timers that can influence the event loop differently. In the browser, timers are tied to the page lifecycle.

How can I pause and resume a timer?

Pause by clearing the current timer and record the remaining time. Resume by creating a new timer with the stored remaining duration. A small wrapper class makes this straightforward.