Event Loop Ordering

event-loop-orderinterview-questionsevent-loopmicrotaskmacrotask

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Event Loop Ordering

Async & Event Loop

Synchronous code runs first on the call stack, then the microtask queue (Promise .then, queueMicrotask) drains completely, then exactly one macrotask (setTimeout) runs before microtasks drain again. So A, B log before C, which logs before D.

Every tick of the event loop starts by running synchronous code to completion on the call stack. In the example, console.log("A") and console.log("B") both run here, so A and B print first, in source order.

Once the stack is empty, the engine drains the entire microtask queue — every Promise .then/.catch callback and queueMicrotask job — before touching anything else. That is why console.log("C") from the resolved promise prints third, ahead of the timer.

Only after the microtask queue is fully empty does the loop pull one macrotask (here the setTimeout callback) and run it; afterwards microtasks drain again. So the setTimeout "D" prints last, giving the order A, B, C, D.

Sync stack runs first, fully, in source order.

Microtasks (.then, queueMicrotask) drain completely before any macrotask.

One macrotask (setTimeout) runs after microtasks; output is A, B, C, D.

console.log("A");                       // sync — runs now
setTimeout(() => console.log("D"));      // macrotask — runs last
Promise.resolve().then(() => console.log("C")); // microtask — after sync
console.log("B");                       // sync — runs now
// prints: A, B, C, D

Read the implementation

Connect each part of the code to the concept before you type.

1. Synchronous first

Synchronous code runs immediately on the call stack, so "A" logs before anything queued.

console.log("A");                       // sync — runs now

2. Macrotask queue

setTimeout schedules a macrotask, which only runs after all sync code and all microtasks finish.

setTimeout(() => console.log("D"));      // macrotask — runs last

3. Microtask queue

A .then callback is a microtask; the microtask queue drains completely after the sync stack empties, before any macrotask.

Promise.resolve().then(() => console.log("C")); // microtask — after sync

4. Still synchronous

This line is also synchronous, so "B" logs right after "A" and before any queued callback.

console.log("B");                       // sync — runs now

5. Final order

Sync (A, B) runs first, then the microtask (C), then the macrotask (D): A, B, C, D.

// prints: A, B, C, D

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.