What is the difference between setTimeout(fn, 0) and Promise.resolve().then(fn)?

Question

Accepted Answer

The fundamental difference between `setTimeout(fn, 0)` and `Promise.resolve().then(fn)` lies in which task queue the callback is placed in the event loop. This seemingly small distinction has significant implications for execution order, performance, and application behavior. `setTimeout` always schedules its callback as a macrotask, while promise callbacks are always scheduled as microtasks, which have higher priority and are processed before the next macrotask. Understanding this difference is essential for predicting code execution order and avoiding subtle bugs in asynchronous JavaScript. **Queue**: Macrotask queue (also called task queue) . **Minimum delay**: Despite the 0ms argument, browsers enforce a minimum delay of 4ms after a certain number of nested timeouts, and Node.js has similar clamping behavior . **Execution timing**: Runs after all microtasks (including promise callbacks) have been processed, and after the current call stack is empty . **Use cases**: Deferring work that should happen after rendering, avoiding long-running tasks blocking the event loop, implementing throttling . **Queue**: Microtask queue (also called promise job queue) . **Immediate execution**: Runs as soon as possible after the current synchronous code completes, before any macrotasks . **No minimum delay**: Executes as soon as the microtask queue is processed, without any artificial delay . **Priority**: All microtasks are processed in a single batch before moving to the next macrotask, even if they schedule additional microtasks . **Use cases**: Ensuring consistency after state changes, sequencing promise-based operations, avoiding race conditions . console.log('1: Synchronous');

setTimeout(() => {
  console.log('2: setTimeout (macrotask)');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Promise.then (microtask)');
});

Promise.resolve().then(() => {
  console.log('4: Another microtask');
  
  // Even nested microtasks run before setTimeout
  queueMicrotask(() => {
    console.log('5: Nested microtask');
  });
});

console.log('6: More sync code');

// Output:
// 1: Synchronous
// 6: More sync code
// 3: Promise.then (microtask)
// 4: Another microtask
// 5: Nested microtask
// 2: setTimeout (macrotask) This priority system is by design. Promises are meant to represent values that will be available "soon," and their callbacks should execute as soon as possible to maintain consistency. For example, if you update application state and then resolve a promise, you want any `.then` callbacks to see that updated state immediately, before any timers or I/O events have a chance to run. Microtasks provide this guarantee. **setTimeout overhead**: Even with 0ms, timers have more overhead than promises. They need to interact with the timer subsystem and may involve system calls . **Recursive scheduling**: Using `setTimeout` recursively can accumulate delay due to clamping; promise microtasks can run indefinitely without accumulating delay . **Event loop starvation**: A microtask that continuously schedules itself can starve macrotasks entirely, as microtasks are processed in an infinite loop before the event loop can check macrotasks . **Rendering impact**: In browsers, rendering occurs between macrotasks. `setTimeout` callbacks may see UI updates, while microtasks run before rendering, potentially batching DOM updates . **Error handling**: Unhandled promise rejections are tracked differently from errors in setTimeout callbacks, affecting debugging and crash reporting . // Microtask: Runs before browser rendering
Promise.resolve().then(() => {
  document.body.style.backgroundColor = 'red';
  // This change might not be visible yet because
  // rendering happens after microtasks
});

// Macrotask: Runs after rendering
setTimeout(() => {
  document.body.style.backgroundColor = 'blue';
  // This change will be visible in the next frame
}, 0);

// To ensure you see the red flash, you'd need to
// force a reflow or use requestAnimationFrame In Node.js, the distinction is even more pronounced due to the event loop's phase structure. `setTimeout` callbacks are processed in the 'timers' phase, while promise microtasks are processed between each phase. Additionally, Node.js has `process.nextTick`, which has its own queue with even higher priority than promise microtasks, creating a third tier of scheduling priority: nextTick > promise microtasks > timers > I/O > setImmediate. const fs = require('fs');

setTimeout(() => console.log('1: setTimeout (timers phase)'), 0);

Promise.resolve().then(() => console.log('2: Promise (microtask)'));

process.nextTick(() => console.log('3: nextTick (highest priority microtask)'));

fs.readFile(__filename, () => {
  console.log('4: I/O callback (I/O phase)');
});

setImmediate(() => console.log('5: setImmediate (check phase)'));

console.log('6: Synchronous');

// Output (likely, but I/O timing may vary):
// 6: Synchronous
// 3: nextTick
// 2: Promise
// 1: setTimeout
// 4: I/O callback (if fi

What is the difference between setTimeout(fn, 0) and Promise.resolve().then(fn)?

setTimeout(fn, 0) schedules the callback as a macrotask in the event loop, while Promise.resolve().then(fn) schedules it as a microtask, which gives promises higher priority and guarantees they execute before any setTimeout callbacks.

What is the difference between setTimeout(fn, 0) and Promise.resolve().then(fn)?

setTimeout(fn, 0) schedules the callback as a macrotask in the event loop, while Promise.resolve().then(fn) schedules it as a microtask, which gives promises higher priority and guarantees they execute before any setTimeout callbacks.

Scenario Questions

Follow-up Questions