Alternatives to setTimeout in Modern JavaScript

Alternatives to setTimeout in Modern JavaScript

setTimeout is not always the right scheduling tool. Modern JavaScript offers better alternatives for specific use cases.

1. requestAnimationFrame (For Animations)

function animate() {
  element.style.left = parseInt(element.style.left) + 1 + "px";
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Syncs with the browser's refresh rate. Pauses when the tab is hidden. Use for: visual animations.

2. queueMicrotask (For Urgent Work)

queueMicrotask(() => { ... });

Runs before rendering and macrotasks. Use for: urgent work that must run before the next event.

3. requestIdleCallback (For Low-Priority Work)

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) doWork();
});

Runs when the browser is idle. Use for: analytics, pre-fetching.

4. scheduler.postTask (For Prioritized Scheduling)

scheduler.postTask(() => { ... }, { priority: "user-blocking" });

Newer API for prioritized scheduling. Use for: fine-grained priority control.

5. async/await (For Async Flow)

async function main() {
  const data = await fetch("/api");
  process(data);
}

Use for: readable async code.

6. Web Workers (For Heavy Computation)

const worker = new Worker("heavy.js");

Runs on a separate thread. Use for: CPU-intensive work.

The Takeaway

Use requestAnimationFrame for animations, queueMicrotask for urgent work, requestIdleCallback for low-priority work, scheduler.postTask for prioritized scheduling, async/await for async flow, and Web Workers for heavy computation.