The Event Loop: One Thread, Many Queues

You write setTimeout(fn, 0) expecting fn to run immediately. It doesn't. Something else runs first. You add await to a fetch — and a Promise you never awaited resolves before your next line. The console logs come out in the wrong order.

JavaScript has exactly one thread. Yet it can handle user clicks, network responses, animations, and timers all at once — without crashing or mixing them up. How? The event loop.

Once you see the event loop clearly, a whole category of "why did this run first?" bugs disappears forever.

Think of JavaScript like a chef with one pair of hands. The chef can only do one thing at a time, but has three kinds of tickets:

• Big tickets (macrotasks): setTimeout, setInterval, I/O, user events
• Urgent tickets (microtasks): Promise callbacks, queueMicrotask
• Paint tickets (render steps): requestAnimationFrame, style calculation

The rule: finish one big ticket → clear all urgent tickets → paint if it's time → next big ticket. Urgent tickets always jump the queue ahead of the next big ticket.

Here's a classic trap: you have a list of 10,000 items to process. You write a loop that processes them all at once. The page freezes. Scrolling stops. Users see the spinning cursor. The browser can't render anything because JavaScript is still running.

This is called blocking the main thread. JavaScript is running, but the event loop can't move on to rendering or handling clicks — because the current task hasn't finished.

// ❌ Blocks the main thread — no rendering during loop
function processAll(items) {
  for (const item of items) {
    heavyTransform(item); // each takes ~1ms = 10s total
  }
}

The fix is to break work into small chunks and let the event loop breathe between chunks. The simplest way: wrap each chunk in a setTimeout(0) (or better, scheduler.yield() if available).

// ✅ Yields between chunks — browser can paint + handle clicks
async function processInChunks(items, chunkSize = 100) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(heavyTransform);
    await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Each await setTimeout(0) pauses execution, returns control to the event loop (letting it render and handle events), then comes back. The work takes the same total time, but the page stays responsive.

Click "Blocking" — the counter freezes while work runs. Click "Yielding" — the counter keeps ticking because the loop yields to the event loop between chunks.

The simplest rule: if your page ever freezes or drops frames, check for synchronous loops over large data. Use the browser's Performance tab → look for long red blocks in the main thread timeline.

To fix: add await new Promise(r => setTimeout(r, 0)) inside long loops.