The Event Loop and Concurrency Model

JavaScript is single-threaded — only one piece of code runs at a time. Yet browsers handle network requests, timers, and user events simultaneously without freezing. This apparent contradiction is resolved by the event loop: a mechanism that coordinates the execution of synchronous code, asynchronous callbacks, microtasks, and macrotasks. Understanding how the event loop works is the key to understanding why setTimeout(fn, 0) does not run immediately, why Promises resolve before timers, and why blocking the main thread freezes the UI. Everything in async JavaScript builds on this foundation.

The JavaScript Runtime Components #

Event Loop Tick Order #

Macrotasks vs Microtasks #

Basic Example #

// ── Execution order demonstration ─────────────────────────────────────────
console.log('1 — sync start');

setTimeout(() => console.log('4 — macrotask (setTimeout 0)'), 0);

Promise.resolve()
    .then(() => console.log('3 — microtask (Promise.then)'));

queueMicrotask(() => console.log('3b — microtask (queueMicrotask)'));

console.log('2 — sync end');

// Output order:
// 1 — sync start
// 2 — sync end
// 3 — microtask (Promise.then)
// 3b — microtask (queueMicrotask)
// 4 — macrotask (setTimeout 0)

// ── Multiple microtasks drain completely ──────────────────────────────────
setTimeout(() => console.log('macrotask'), 0);

Promise.resolve()
    .then(() => {
        console.log('microtask 1');
        // Adding another microtask from inside a microtask:
        return Promise.resolve();
    })
    .then(() => console.log('microtask 2'))
    .then(() => console.log('microtask 3'));

// Output: microtask 1, microtask 2, microtask 3, macrotask
// The macrotask waits until ALL microtasks are drained

// ── Visualising the call stack ────────────────────────────────────────────
function third()  { console.log('third'); }
function second() { third(); }
function first()  { second(); }

// Call stack at deepest point:
// [third, second, first, anonymous (global)]
first();   // runs synchronously — all frames pop before event loop checks queue

// ── Blocking the event loop ───────────────────────────────────────────────
function blockingWork(ms) {
    const end = Date.now() + ms;
    while (Date.now() < end) {}   // busy-wait — blocks EVERYTHING
}

// During blockingWork(2000): no UI events, no timer callbacks, no renders
// ❌ Never do this for long operations

// ── Non-blocking with chunked processing ─────────────────────────────────
function processInChunks(items, processOne, chunkSize = 100) {
    let index = 0;

    function processChunk() {
        const end = Math.min(index + chunkSize, items.length);
        while (index < end) {
            processOne(items[index++]);
        }
        if (index < items.length) {
            setTimeout(processChunk, 0);   // yield to event loop between chunks
        }
    }

    processChunk();
}

const bigData = Array.from({ length: 10_000 }, (_, i) => i);
processInChunks(bigData, item => {
    // process each item
}, 500);

// ── Starvation example ────────────────────────────────────────────────────
// This will run forever — microtasks starve macrotasks
function starve() {
    Promise.resolve().then(starve);   // ❌ infinite microtask loop
}
// Don't call starve() — here for illustration only

// ── requestAnimationFrame timing ─────────────────────────────────────────
// rAF runs between microtask drain and next macrotask
// Guaranteed to run before the browser paints

let frameCount = 0;
function countFrames() {
    frameCount++;
    if (frameCount < 60) requestAnimationFrame(countFrames);
}
requestAnimationFrame(countFrames);
// Will count exactly 60 frames at ~60fps — one per render cycle

How It Works #

Step 1 — The Call Stack Is Synchronous and Single-Threaded #

When a function is called, a frame is pushed onto the call stack. When it returns, the frame is popped. The engine can only process one frame at a time. A deeply nested call chain like first() → second() → third() builds up three stack frames; all three must complete and pop before the event loop can check the task queues.

Step 2 — Web APIs Run Outside the Engine #

When you call setTimeout(fn, 1000), the engine hands the timer and callback to the browser’s Web API environment and immediately continues executing. The browser tracks the timer separately. After 1000ms, the browser places fn in the macrotask queue. The engine picks it up only when the call stack is empty.

Step 3 — Microtasks Have Higher Priority Than Macrotasks #

After every synchronous code block and after every macrotask, the event loop completely drains the microtask queue before doing anything else — including rendering and running the next macrotask. This guarantees that Promise resolutions are always processed as a group before any timer fires, ensuring predictable ordering in async code.

Step 4 — Rendering Happens Between Microtask Drain and Next Macrotask #

The browser decides whether to repaint the screen between each event loop tick — typically targeting 60 frames per second (every ~16ms). requestAnimationFrame callbacks run just before the paint step, giving you a hook to update the DOM at the exact right time for smooth animation.

Step 5 — Long Synchronous Code Blocks Everything #

While synchronous code is running, the event loop is frozen. No callbacks fire, no events are processed, and the browser cannot repaint. If your synchronous function takes 500ms, the page is completely unresponsive for 500ms. The solutions are: break work into chunks yielded via setTimeout, or move heavy computation to a Web Worker.

Real-World Example: Task Scheduler #

// task-scheduler.js
// Demonstrates event loop by scheduling tasks with different priorities

class TaskScheduler {
    #microtasks  = [];
    #macrotasks  = [];
    #rafTasks    = [];
    #log         = [];

    micro(fn, label) {
        queueMicrotask(() => {
            this.#log.push(`[microtask] ${label}`);
            fn();
        });
        return this;
    }

    macro(fn, label, delay = 0) {
        setTimeout(() => {
            this.#log.push(`[macrotask ${delay}ms] ${label}`);
            fn();
        }, delay);
        return this;
    }

    frame(fn, label) {
        requestAnimationFrame(() => {
            this.#log.push(`[rAF] ${label}`);
            fn();
        });
        return this;
    }

    sync(fn, label) {
        this.#log.push(`[sync] ${label}`);
        fn();
        return this;
    }

    printLog() {
        console.log(this.#log.join('
'));
    }
}

const scheduler = new TaskScheduler();

scheduler
    .sync(  () => {},   'Start')
    .macro( () => {},   'Timer 100ms', 100)
    .micro( () => {},   'Promise 1')
    .frame( () => {},   'Animation frame')
    .micro( () => {},   'Promise 2')
    .macro( () => {},   'Timer 0ms', 0)
    .sync(  () => {},   'End');

// Expected log order:
// [sync]          Start
// [sync]          End
// [microtask]     Promise 1
// [microtask]     Promise 2
// [rAF]           Animation frame
// [macrotask 0ms] Timer 0ms
// [macrotask 100ms] Timer 100ms

Common Mistakes #

Mistake 1 — Assuming setTimeout(fn, 0) runs immediately #

❌ Wrong assumption:

setTimeout(() => console.log('first'), 0);
console.log('second');
// Logs: 'second' then 'first' — not 'first' then 'second'

✅ Understand: setTimeout schedules a macrotask after current sync + microtasks:

// If you need something after sync code, use a microtask:
queueMicrotask(() => console.log('runs after sync but before timers'));

Mistake 2 — Blocking the event loop with heavy computation #

❌ Wrong — freezes the UI for the entire duration:

button.addEventListener('click', () => {
    const result = heavyComputation(1_000_000);  // blocks for 2 seconds
    display.textContent = result;
});

✅ Correct — use a Web Worker or yield between chunks:

button.addEventListener('click', async () => {
    const worker = new Worker('./heavy-worker.js');
    worker.postMessage({ count: 1_000_000 });
    worker.onmessage = e => display.textContent = e.data.result;
});

Mistake 3 — Infinite microtask loop starving the render #

❌ Wrong — page never updates because microtasks never end:

function loop() { Promise.resolve().then(loop); }
loop();  // renders freeze — browser appears hung

✅ Correct — use setInterval or requestAnimationFrame for repeating work:

function loop() { requestAnimationFrame(loop); }
requestAnimationFrame(loop);  // runs once per frame — browser can render

▶ Try It Yourself

Quick Reference #