setTimeout vs requestAnimationFrame vs queueMicrotask in JavaScript

setTimeout vs requestAnimationFrame vs queueMicrotask in JavaScript

JavaScript has several scheduling APIs. Each has a different priority and use case.

setTimeout (Macrotask)

• Queue: macrotask queue.
• Priority: lowest (runs after microtasks and rendering).
• Use case: delayed actions, breaking long tasks, polling.

requestAnimationFrame (Before Paint)

• Queue: runs before the next paint.
• Priority: between microtasks and macrotasks.
• Use case: visual animations, DOM updates.

queueMicrotask (Microtask)

• Queue: microtask queue.
• Priority: highest (runs before rendering and macrotasks).
• Use case: urgent work that should run before the next event.

Order of Execution

console.log("sync");
setTimeout(() => console.log("timeout"), 0);
requestAnimationFrame(() => console.log("rAF"));
queueMicrotask(() => console.log("microtask"));

Output: sync, microtask, rAF, timeout.

The Takeaway

setTimeout is a macrotask (lowest priority). requestAnimationFrame runs before the next paint (for animations). queueMicrotask is a microtask (highest priority). Use each for its specific use case.