Reason about callback ordering
Predicting console output when timers and Promise callbacks are mixed.
JS Puzzles · Const
Event Loop
The JavaScript event loop processes macrotasks one at a time, then drains all pending microtasks before rendering and moving to the next macrotask. This ordering governs scripts, timers, user events, and Promise callbacks.
How it works
The event loop repeatedly takes the oldest macrotask, runs it to completion, drains every queued microtask, and then allows rendering before continuing. Timers, scripts, and user events supply macrotasks, while promise handlers and explicit microtasks use the microtask queue; this ordering explains why asynchronous callbacks do not interrupt currently running JavaScript.
Key points
- The engine alternates between processing available work and sleeping until new work arrives.
- Scripts, user events, and due timer callbacks enter a FIFO-style macrotask queue.
- Loading an external script creates a task whose work is running that script.
- A timer callback becomes a task only when its scheduled time has arrived.
- After the microtask checkpoint, the browser may render changes before taking another macrotask.
Common mistakes
- A long chain of microtasks can postpone rendering and later tasks, so repeatedly enqueueing microtasks can make the page unresponsive.
Example: Microtasks run before the next macrotask
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
console.log(4);The script task prints 1 and 4, then the promise reaction runs as a microtask, and the timer callback runs as a later macrotask.
When to use it
Keep long work responsive
Breaking work into scheduled pieces so the browser can handle other tasks between chunks.
Schedule deferred execution
Choosing between a timer and a microtask for follow-up work.
Interview questions
QWhat is the execution order between macrotasks and microtasks?
The loop removes the oldest macrotask and executes it. It then drains the microtask queue completely, renders if needed, and waits for the next macrotask when none is available.
Follow-up: What happens if a microtask queues another microtask? The newly queued microtask is processed in the same drain, before the next macrotask.
QWhy does a resolved Promise usually run before setTimeout(..., 0)?
A timer callback is a macrotask, while a promise reaction is a microtask. Therefore, when both are scheduled by the same task, the promise reaction runs first after the current task ends.
Follow-up: Would zero delay make the timer run first? No; zero delay schedules a later macrotask and does not bypass the microtask checkpoint.
QCan an event-loop callback interrupt running JavaScript?
The current JavaScript task runs synchronously from start to finish. The event loop does not pause it to execute a callback; callbacks are queued and considered only after the current task completes.
Follow-up: How can asynchronous code still delay input? A continuously growing microtask queue can prevent the loop from reaching later tasks, including input handling.
Related
macrotask queuemicrotask queuesetTimeoutPromise handlersrendering