7 Better Alternatives to setTimeout for Reliable JavaScript Timing

setTimeout is a widely used JavaScript timer API that allows delayed code execution, but it has limitations such as low precision and throttling when the page is inactive. This article presents seven alternatives to make timing tasks more reliable and efficient.

1. requestAnimationFrame

Primarily used for animations, it invokes the callback before the next browser repaint.

function animateWithRAF(timestamp) {
  // Execute animation logic
  requestAnimationFrame(animateWithRAF);
}
requestAnimationFrame(animateWithRAF);

Advantages:

Synchronizes with display refresh rate, typically 60 fps

Pauses in hidden tabs, saving resources

Provides smoother animations

2. setInterval + clearInterval

For tasks that need to run repeatedly, setInterval is more suitable than multiple setTimeout calls.

const intervalId = setInterval(() => {
  console.log("Executes once per second");
}, 1000);
// Stop the timer
// clearInterval(intervalId);

Advantages:

Code is more concise

Better for fixed‑interval repeated tasks

3. requestIdleCallback

Executes low‑priority tasks when the browser is idle, avoiding impact on critical operations.

Advantages:

Utilizes idle time efficiently

Can set a timeout to guarantee execution

Does not block main‑thread critical work

4. Web Workers

Moves heavy computations to a background thread, preventing UI thread blockage.

Advantages:

Does not block the UI thread

Continues execution even when the page is inactive

Suitable for CPU‑intensive tasks

5. Promise + async/await

Wraps setTimeout in a Promise and combines with async/await for clearer asynchronous code.

Advantages:

Code is clearer, avoiding callback hell

Better error handling

Facilitates chaining multiple async operations

6. Web Animations API

Provides advanced control for animation effects.

Advantages:

Declarative API that is easier to understand

Built‑in pause, resume, and control features

More precise than CSS animations or setTimeout

7. Intersection Observer

Runs code when an element enters the viewport, useful for lazy loading or triggering animations.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("Element entered viewport");
      // Execute required operation
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

Advantages:

No need to manually calculate element positions

Better performance, avoiding heavy calculations in scroll events

Ideal for “on‑demand” execution scenarios