Chapter 13 — Event Loop & Task Queues (Visual Guide)

📖 Definition

JavaScript runs your code on one thread — it can do only one thing at a time. The event loop is the manager that decides what runs next: your normal code first, then waiting callbacks from two queues — the microtask queue (promises) and the task queue (timers, clicks, network events).

One line to remember: Run the current code → run ALL microtasks → (browser paints) → run ONE task → repeat.

🍳 A Simple Analogy — One Chef in a Kitchen

The chef never stops in the middle of a dish. When a dish is finished, the manager first hands over every VIP order, and only then one regular order.

🖼️ The Big Picture

🔍 The Five Parts

🔁 One Turn of the Event Loop

The rules in words:

1. Run the current script (or task) until the call stack is empty. Nothing can interrupt it.
2. Run every microtask. If a microtask adds another microtask, that runs too, before moving on.
3. The browser may repaint the screen (and run requestAnimationFrame callbacks).
4. Take one task from the task queue and go back to step 1.

💻 Example 1 — The Classic Question

console.log("1: start");

setTimeout(() => console.log("2: timeout"), 0);

Promise.resolve().then(() => console.log("3: promise"));

console.log("4: end");

Output: 1: start → 4: end → 3: promise → 2: timeout

Step by step

Key insight: setTimeout(fn, 0) does not mean "run now". It means "run after at least 0 ms, once the stack is empty and all microtasks are done".

💻 Example 2 — async / await

async function load() {
  console.log("A1: inside load");
  await null;                        // everything after await becomes a microtask
  console.log("A2: after await");
}

console.log("S: start");
setTimeout(() => console.log("T: timeout"), 0);
load();
Promise.resolve().then(() => console.log("P: promise"));
console.log("E: end");

Output: S → A1 → E → A2 → P → T

An async function runs normally (synchronously) until the first await. Only the code after await is delayed.

💻 Example 3 — Microtasks Added by Microtasks

setTimeout(() => console.log("timeout"), 0);

Promise.resolve().then(() => {
  console.log("p1");
  Promise.resolve().then(() => console.log("p2"));   // added while microtasks are running
});

Output: p1 → p2 → timeout New microtasks join the same queue that is being emptied, so p2 still runs before the timeout.

💻 Example 4 — Microtasks Run After Each Task

setTimeout(() => {
  console.log("t1");
  Promise.resolve().then(() => console.log("promise inside t1"));
}, 0);
setTimeout(() => console.log("t2"), 0);

Output: t1 → promise inside t1 → t2 After task t1, the loop empties the microtask queue before picking task t2.

📋 Which Queue Does It Go To?

⚠️ Common Mistakes

1. Blocking the call stack freezes everything

button.addEventListener("click", () => {
  const end = Date.now() + 3000;
  while (Date.now() < end) {}        // 3 s of busy work — page can't scroll, click or repaint
  console.log("done");
});

While the stack is busy, the event loop can't run anything — no clicks, no timers, no painting.

Fix: split work into chunks so the loop can breathe, or move it to a Web Worker (browser) / worker thread (Node).

async function processInChunks(items, chunkSize = 500) {
  for (let i = 0; i < items.length; i += chunkSize) {
    items.slice(i, i + chunkSize).forEach(processItem);
    await new Promise((r) => setTimeout(r, 0));     // give the event loop a turn
  }
}

2. Endless microtasks also freeze the page

function loop() { Promise.resolve().then(loop); }   // ❌ microtask queue never empties
loop();                                              // page never repaints, timers never run

3. Expecting setTimeout(fn, 1000) to run in exactly 1 second

The delay is a minimum. If the stack is busy for 3 seconds, the callback runs after 3 seconds. Browsers also clamp nested timers to at least ~4 ms.

4. Thinking new Promise is async

new Promise((resolve) => {
  console.log("executor");   // runs immediately
  resolve();
}).then(() => console.log("then"));
console.log("after");
// executor → after → then

🟩 Node.js Is Slightly Different

Node uses the same idea but its event loop has phases: timers → pending callbacks → poll (I/O) → check (setImmediate) → close callbacks. Between callbacks it drains the process.nextTick queue first, then promise microtasks. Details are in the Node.js: Event Loop chapter.

🧩 Practice — Predict the Output

Puzzle 1

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
queueMicrotask(() => console.log(4));
console.log(5);

Puzzle 2

async function f() {
  console.log("f1");
  await g();
  console.log("f2");
}
async function g() { console.log("g"); }

f();
console.log("end");

Puzzle 3

setTimeout(() => console.log("A"), 10);
setTimeout(() => console.log("B"), 0);
const start = Date.now();
while (Date.now() - start < 50) {}     // block for 50 ms
console.log("C");

Puzzle 4

const p = new Promise((resolve) => {
  console.log("1");
  setTimeout(() => { console.log("2"); resolve(); }, 0);
});
p.then(() => console.log("3"));
console.log("4");

Puzzle 5

button.addEventListener("click", () => {
  Promise.resolve().then(() => console.log("micro"));
  console.log("listener");
});
button.click();          // called from code
console.log("after click");

🌍 Real-World Impact

• Understanding the loop explains why a heavy for loop makes the UI freeze, and why moving it to a Web Worker fixes it.
• It explains why React state updates and promise callbacks appear "later" than surrounding code.
• In Node.js APIs, one CPU-heavy request (big JSON parse, image resize) blocks all users — the same rule applies on the server.

🎯 Likely Interview Questions

1. What is the event loop? — A mechanism that runs queued callbacks when the call stack is empty: all microtasks first, then one task, repeatedly.
2. Microtask vs macrotask? — Microtasks (promises, await, queueMicrotask) all run right after the current code; macrotasks (setTimeout, events, I/O) run one per loop turn.
3. Why does Promise.then run before setTimeout(fn, 0)? — The microtask queue is emptied before the next task is taken.
4. Is JavaScript single-threaded? Then how is it asynchronous? — Your JS runs on one thread; timers, network and I/O run in the browser/Node background, and their callbacks are queued for the loop.
5. Does setTimeout(fn, 0) run immediately? — No; after the current code and all microtasks finish, with at least the given delay.
6. What runs synchronously in an async function? — Everything up to the first await.
7. How can the event loop get blocked? — Long synchronous work or an endless chain of microtasks; nothing else can run, the page freezes.
8. Where does requestAnimationFrame run? — In the render step, just before the browser paints.
9. How is Node's event loop different? — It has phases (timers, poll, check…) and a process.nextTick queue that runs before promise microtasks.

← Promises | Index | Next: Debounce / Throttle →