The Event Loop, Stack & Queue

8. Practice Problems

1. Predict and run the famous A–D–C–B puzzle.
   ✨ Show Answer

   a1.js

   console.log("A");
   setTimeout(() => console.log("B"), 0);
   Promise.resolve().then(() => console.log("C"));
   console.log("D");

   Run Copy

   Output: A D C B.

2. Show that queueMicrotask runs before any setTimeout(0).
   ✨ Show Answer

   a2.js

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

   Run Copy

3. Predict: what does Promise.resolve(42).then(v => v + 1).then(console.log) print?
   ✨ Show Answer

   a3.js

   Promise.resolve(42).then(v => v + 1).then(console.log);

   Run Copy

4. Demonstrate that a long sync loop blocks a setTimeout.
   ✨ Show Answer

   a4.js

   const t0 = Date.now();
   setTimeout(() => console.log("timer:", Date.now() - t0), 0);
   for (let i = 0; i < 2e7; i++);
   console.log("sync done", Date.now() - t0);

   Run Copy

5. Show that nested microtasks all run before the next macrotask.
   ✨ Show Answer

   a5.js

   setTimeout(() => console.log("timeout"), 0);
   Promise.resolve().then(() => {
       console.log("m1");
       Promise.resolve().then(() =>
           Promise.resolve().then(() => console.log("m3")));
       Promise.resolve().then(() => console.log("m2"));
   });

   Run Copy

6. Build a tiny "task queue" simulator that runs one item per tick using setTimeout(0).
   ✨ Show Answer

   a6.js

   const tasks = [1, 2, 3, 4, 5];
   function tick() {
       if (!tasks.length) return console.log("done");
       console.log("task", tasks.shift());
       setTimeout(tick, 0);
   }
   tick();

   Run Copy

7. In one sentence, why is JS called "non-blocking" if it's single-threaded?
   ✨ Show Answer

   Answer: Because long-running operations (network, timers, I/O) are handed to native APIs that run on other threads, leaving the JS thread free to keep handling synchronous work; results come back as queued tasks for later.

8. Predict: how many microtasks run before the first setTimeout if you chain .then 5 times?
   ✨ Show Answer

   All 5 — each .then queues another microtask, and the loop drains the entire microtask queue before any macrotask. Run the snippet to confirm.

9. Compare event loop in browser vs Node.js (one paragraph).
   ✨ Show Answer

   Answer: Both have a microtask queue and process it the same way. The browser's macrotask queue is a single queue of user events, timers, and rendering tasks. Node's libuv loop has multiple phases (timers, I/O callbacks, check, close) and runs microtasks between phases, so the relative order of timers vs immediates can differ from browsers — but the core "drain microtasks, then take one macrotask" rule is identical.

10. Use queueMicrotask to schedule a callback after the current sync code.
    ✨ Show Answer

    a10.js

    queueMicrotask(() => console.log("after sync"));
    console.log("sync");

    Run Copy

11. Why might a tight while-loop with setTimeout(0) still freeze the page in some cases?
    ✨ Show Answer

    Answer: Each setTimeout body becomes a macrotask, but if you keep queueing them in a loop without yielding (or if browsers clamp nested timers to 4ms), the queue grows faster than the loop can render. Use requestAnimationFrame or actual chunked work via requestIdleCallback for cooperative scheduling.

12. Show that a Promise resolved synchronously still settles asynchronously.
    ✨ Show Answer

    a12.js

    console.log("before");
    Promise.resolve("hi").then(console.log);
    console.log("after");

    Run Copy

    Output: before, after, hi. .then always defers to a microtask.