7 Better Alternatives to setTimeout for Reliable JavaScript Timing

setTimeout

is a commonly used timer API that allows delayed execution, but it has limitations such as low precision and throttling when the page is inactive. Here are seven alternatives to make timing tasks more reliable and efficient.

1. requestAnimationFrame

requestAnimationFrame

is mainly used for animations; it calls the callback before the next repaint.

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

Advantages:

Synchronizes with display refresh rate, usually 60fps

Pauses in hidden tabs, saving resources

Produces smoother animations

2. setInterval + clearInterval

For tasks that need repeated execution, setInterval is more suitable than multiple setTimeout calls.

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

// To stop the timer
// clearInterval(intervalId);

Advantages:

Code is more concise

Better for fixed‑interval repetitive 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 time‑consuming tasks 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 compute‑intensive tasks

5. Promise + async/await

Wraps setTimeout with a Promise; combined with async/await it makes asynchronous code clearer.

Advantages:

Code is clearer, avoiding callback hell

Better error handling

Facilitates chaining multiple async operations

6. Web Animations API

For animation effects, the Web Animations API offers higher‑level control.

Advantages:

Declarative API, easier to understand

Built‑in pause, resume, and control features

More precise than CSS animations and

setTimeout

7. Intersection Observer

Executes 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");
      // perform needed actions
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

Advantages:

No manual position calculations

Better performance, avoids heavy scroll‑event calculations

Ideal for “execute on demand” scenarios