How does Promise.then() differ from setTimeout() in terms of execution order?

Question

Accepted Answer

Promise.then() and setTimeout() differ fundamentally in execution order because they are scheduled into different queues in the JavaScript event loop. Promise.then() schedules a **microtask**, which runs immediately after the current synchronous code completes and before any macrotask. setTimeout() schedules a **macrotask** (also called a callback or task), which runs after the microtask queue has been completely emptied and the browser has had a chance to render. This means that even when setTimeout is called with a delay of 0 milliseconds, its callback will never run before a Promise.then() callback that is queued in the same event loop iteration. console.log('1: Synchronous start');

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

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

console.log('4: Synchronous end');

// Output order:
// 1: Synchronous start
// 4: Synchronous end
// 3: Promise.then callback (microtask)
// 2: setTimeout callback (macrotask)

// Promise.then() runs before setTimeout() even with 0ms delay // In Node.js, the event loop has distinct phases:
// timers (setTimeout, setInterval) → pending callbacks → idle, prepare → poll → check (setImmediate) → close callbacks

setTimeout(() => console.log('Timer (macrotask)'), 0);

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

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

console.log('Sync');

// Output in Node.js:
// Sync
// nextTick (microtask priority)
// Promise (microtask)
// Timer (macrotask)

// Note: process.nextTick has even higher priority than Promise.then **Queue Type**: Promise.then() uses the microtask queue; setTimeout() uses the macrotask (callback) queue. **Execution Priority**: Microtasks (Promise.then) are processed before any macrotask (setTimeout), even when the macrotask has a delay of 0. **Batching Behavior**: All microtasks queued during the current microtask processing are executed before moving to macrotasks, while macrotasks are processed one per event loop iteration. **Blocking Potential**: Recursively adding microtasks (e.g., chaining Promise.then within itself) can block the event loop indefinitely, while setTimeout provides a yield point for the event loop. **Use Cases**: Promise.then is ideal for async operations that need immediate continuation; setTimeout is better for deferring work and allowing the UI/event loop to breathe. // WARNING: This pattern can freeze the event loop
function microtaskOverflow() {
  Promise.resolve().then(() => {
    console.log('Microtask running');
    microtaskOverflow(); // Recursively adds more microtasks
  });
}

// setTimeout provides a way to break the loop
function safeRecursion() {
  console.log('Processing batch');
  setTimeout(() => safeRecursion(), 0); // Yields to event loop
}

// Promise.then chains maintain order but can starve macrotasks
Promise.resolve()
  .then(() => console.log('Step 1'))
  .then(() => console.log('Step 2'))
  .then(() => console.log('Step 3'));
// All three then callbacks run before any setTimeout callback This difference has practical implications for performance and reliability. In React's batching mechanism, state updates are often batched using microtasks to ensure updates are applied before the browser repaints. In Node.js, understanding this distinction is crucial for server performance: using setImmediate (macrotask) vs process.nextTick (microtask) affects how quickly the event loop can process I/O operations. The general rule is: use Promise.then (or async/await) for order-dependent async operations, and use setTimeout for deferring non-critical work that shouldn't block rendering or I/O.

How does Promise.then() differ from setTimeout() in terms of execution order?

Scenario Questions

Follow-up Questions