JavaScript Event Loop Explained

function multiply(a, b) {
    return a * b;
}

function square(n) {
    return multiply(n, n);  // multiply pushed onto stack
}

function printSquare(n) {
    const result = square(n);  // square pushed onto stack
    console.log(result);
}

printSquare(4);  // printSquare pushed onto stack

// Stack progression:
// 1. [printSquare]
// 2. [printSquare, square]
// 3. [printSquare, square, multiply]
// 4. [printSquare, square]   ← multiply returns 16
// 5. [printSquare]           ← square returns 16
// 6. []                      ← printSquare logs 16, returns

console.log('1: Start');

// setTimeout hands off to the Web API (browser timer)
// JS does NOT pause — it continues immediately
setTimeout(() => {
    console.log('3: Timeout callback (runs after stack clears)');
}, 1000);

// fetch hands off to the Web API (network layer)
fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        console.log('4: Fetch resolved');
    });

console.log('2: End');

// Output order:
// 1: Start
// 2: End
// 3: Timeout callback (runs after stack clears, ~1 second later)
// 4: Fetch resolved (runs after fetch completes, order relative to timeout varies)

console.log('1: Synchronous start');

setTimeout(() => console.log('5: setTimeout (macrotask)'), 0);

Promise.resolve()
    .then(() => console.log('3: Promise .then (microtask)'))
    .then(() => console.log('4: Chained Promise (microtask)'));

queueMicrotask(() => console.log('2.5: queueMicrotask (microtask)'));

console.log('2: Synchronous end');

// Output:
// 1: Synchronous start
// 2: Synchronous end
// 2.5: queueMicrotask (microtask)
// 3: Promise .then (microtask)
// 4: Chained Promise (microtask)
// 5: setTimeout (macrotask)
//
// WHY: After the synchronous code finishes (stack empties),
// ALL microtasks drain before the macrotask queue is checked.

console.log('A');  // sync

setTimeout(() => console.log('B'), 0);  // macrotask

Promise.resolve()
    .then(() => {
        console.log('C');  // microtask
        setTimeout(() => console.log('D'), 0);  // schedules new macrotask
    })
    .then(() => console.log('E'));  // microtask (chained)

setTimeout(() => console.log('F'), 0);  // macrotask

console.log('G');  // sync

// Output: A, G, C, E, B, F, D
//
// Breakdown:
// Sync:       A, G
// Microtasks: C → E (all before any macrotask)
// Macrotask:  B (first setTimeout registered)
// Macrotask:  F (second setTimeout registered)
// Macrotask:  D (setTimeout registered inside Promise .then, after B and F)

async function asyncFn() {
    console.log('2: Inside async function (sync part)');
    await Promise.resolve();  // yields to microtask queue
    console.log('4: After await (microtask)');
}

console.log('1: Before calling asyncFn');
asyncFn();
console.log('3: After calling asyncFn (sync continues)');

// Output:
// 1: Before calling asyncFn
// 2: Inside async function (sync part)
// 3: After calling asyncFn (sync continues)
// 4: After await (microtask)
//
// The async function runs synchronously until the first await,
// then control returns to the caller. The rest resumes as a microtask.

// Process a large array without blocking the UI
async function processLargeArray(items) {
    const chunkSize = 100;

    for (let i = 0; i < items.length; i += chunkSize) {
        const chunk = items.slice(i, i + chunkSize);

        // Process this chunk synchronously
        chunk.forEach(item => processItem(item));

        // Yield control back to the event loop between chunks
        // This lets the browser render frames and handle user input
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

// In Node.js, use setImmediate for better performance:
await new Promise(resolve => setImmediate(resolve));

async function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
    for (let attempt = 0; attempt <= retries; attempt++) {
        try {
            const res = await fetch(url, options);
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            return await res.json();
        } catch (err) {
            if (attempt === retries) throw err;

            // Wait with exponential backoff before retrying
            const backoff = delay * Math.pow(2, attempt);
            console.warn(`Attempt ${attempt + 1} failed. Retrying in ${backoff}ms...`);
            await new Promise(resolve => setTimeout(resolve, backoff));
        }
    }
}

// Usage
const data = await fetchWithRetry('/api/unstable-endpoint', {}, 4, 500);

// Measure how long the event loop is blocked
function measureEventLoopLag(intervalMs = 500) {
    let last = Date.now();

    setInterval(() => {
        const now = Date.now();
        const lag = now - last - intervalMs;
        if (lag > 50) {
            console.warn(`Event loop lag detected: ${lag}ms`);
        }
        last = now;
    }, intervalMs).unref();  // .unref() prevents this from keeping the process alive
}

measureEventLoopLag();

// In production, use the built-in perf_hooks module:
const { monitorEventLoopDelay } = require('perf_hooks');
const histogram = monitorEventLoopDelay({ resolution: 10 });
histogram.enable();
setInterval(() => {
    console.log(`P99 event loop delay: ${histogram.percentile(99) / 1e6}ms`);
}, 5000);