7 Better Alternatives to setTimeout for Reliable JavaScript Timing

setTimeout

is a frequently used timer API that allows delayed code execution, but it suffers from low precision and can be throttled when the page is inactive. This article shares seven alternative solutions to make timing tasks more reliable and efficient.

1. requestAnimationFrame

requestAnimationFrame

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

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

Advantages:

Synchronizes with the display's refresh rate, typically 60fps

Pauses in invisible tabs, saving resources

Provides smoother animations

2. setInterval + clearInterval

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

const intervalId = setInterval(() => {
  console.log("每秒执行一次");
}, 1000);
// To stop the timer
// clearInterval(intervalId);

Advantages:

Code is more concise

Better suited for fixed‑interval repetitive tasks

3. requestIdleCallback

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

Advantages:

Utilizes browser idle time efficiently

Can set a timeout to guarantee execution

Does not block main‑thread critical operations

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 and combines with async/await for clearer asynchronous code.

Advantages:

Code is clearer, avoiding callback hell

Better error handling

Facilitates chaining multiple asynchronous operations

6. Web Animations API

For animation effects, the Web Animations API offers more advanced control.

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

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

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("元素进入视口");
      // Execute needed actions
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

Advantages:

No need to manually calculate element positions

Better performance, avoiding heavy calculations in scroll events

Ideal for "execute on demand" scenarios