6.4 The Event Loop

Introduction

JavaScript is single-threaded, meaning it can only execute one piece of code at a time. Yet it handles asynchronous operations like timers, network requests, and user interactions seamlessly. The secret? The Event Loop.

---

The JavaScript Runtime Model

┌──────────────────────────────────────────────────────────────┐
│                   JAVASCRIPT RUNTIME                          │
├──────────────────────────────────────────────────────────────┤
│                                                               │
│  ┌─────────────────┐      ┌─────────────────────────────┐    │
│  │   CALL STACK    │      │         WEB APIs            │    │
│  │                 │      │  (Browser-provided)         │    │
│  │  ┌───────────┐  │      │                             │    │
│  │  │  current  │  │  ──► │  • setTimeout/setInterval   │    │
│  │  ├───────────┤  │      │  • fetch / XMLHttpRequest   │    │
│  │  │  waiting  │  │      │  • DOM events               │    │
│  │  ├───────────┤  │      │  • geolocation              │    │
│  │  │  global   │  │      │                             │    │
│  │  └───────────┘  │      └─────────────────────────────┘    │
│  └─────────────────┘                    │                     │
│           ↑                             │                     │
│           │                             ↓                     │
│           │         ┌─────────────────────────────────────┐  │
│           │         │          CALLBACK QUEUES            │  │
│           │         │                                     │  │
│           │         │  Macrotask Queue (Task Queue):      │  │
│           │         │  [callback1] [callback2] [...]      │  │
│           │         │                                     │  │
│           │         │  Microtask Queue:                   │  │
│           │         │  [promise1] [promise2] [...]        │  │
│           │         └─────────────────────────────────────┘  │
│           │                             │                     │
│           │                             │                     │
│           └─────────── EVENT LOOP ◄─────┘                     │
│                    (continuously checks)                      │
│                                                               │
└──────────────────────────────────────────────────────────────┘

---

How the Event Loop Works

The Basic Algorithm:

┌─────────────────────────────────────────────────────────────┐
│                    EVENT LOOP ALGORITHM                      │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  REPEAT FOREVER:                                             │
│                                                              │
│    1. Is the Call Stack empty?                               │
│       └── NO  → Keep running current code                    │
│       └── YES → Go to step 2                                 │
│                                                              │
│    2. Are there microtasks?                                  │
│       └── YES → Run ALL microtasks                           │
│                 (promises, queueMicrotask)                   │
│       └── NO  → Go to step 3                                 │
│                                                              │
│    3. Is it time to render? (browser only)                   │
│       └── YES → Render (requestAnimationFrame, paint)        │
│       └── NO  → Go to step 4                                 │
│                                                              │
│    4. Are there macrotasks?                                  │
│       └── YES → Run ONE macrotask                            │
│                 (setTimeout, setInterval, I/O)               │
│       └── NO  → Wait for new tasks                           │
│                                                              │
│    5. Go back to step 1                                      │
│                                                              │
└─────────────────────────────────────────────────────────────┘

---

Synchronous vs Asynchronous

Synchronous (Blocking):

console.log('First');
console.log('Second');
console.log('Third');
// Output: First, Second, Third (in order)

Asynchronous (Non-Blocking):

console.log('First');

setTimeout(() => {
  console.log('Second'); // Async - goes to queue
}, 0);

console.log('Third');
// Output: First, Third, Second

---

setTimeout and the Event Loop

console.log('1. Start');

setTimeout(() => {
  console.log('3. Timeout');
}, 0);

console.log('2. End');

Step-by-Step Execution:

Step 1: Execute "console.log('1. Start')"
┌───────────────┐  ┌───────────────┐
│  Call Stack   │  │  Task Queue   │
│               │  │               │
│ console.log() │  │    (empty)    │
│   global      │  │               │
└───────────────┘  └───────────────┘
Output: "1. Start"

Step 2: Execute "setTimeout(...)"
┌───────────────┐  ┌───────────────┐
│  Call Stack   │  │  Web API      │
│               │  │               │
│ setTimeout()  │  │  Timer: 0ms   │
│   global      │  │  callback: () │
└───────────────┘  └───────────────┘
(Timer starts in Web API)

Step 3: Execute "console.log('2. End')"
┌───────────────┐  ┌───────────────┐
│  Call Stack   │  │  Task Queue   │
│               │  │               │
│ console.log() │  │  [callback]   │ ← Timer finished
│   global      │  │               │
└───────────────┘  └───────────────┘
Output: "2. End"

Step 4: Call stack empty, event loop moves callback
┌───────────────┐  ┌───────────────┐
│  Call Stack   │  │  Task Queue   │
│               │  │               │
│   callback    │  │    (empty)    │
│   global      │  │               │
└───────────────┘  └───────────────┘
Output: "3. Timeout"

---

Macrotasks vs Microtasks

Macrotasks (Task Queue):

• •setTimeout
• •setInterval
• •setImmediate (Node.js)
• •I/O operations
• •UI rendering events

Microtasks (Microtask Queue):

• •Promise.then/catch/finally
• •queueMicrotask()
• •MutationObserver

Priority: Microtasks Run First!

console.log('1. Start');

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

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

console.log('2. End');

// Output: 1. Start, 2. End, 3. Promise, 4. Timeout

Why?

┌─────────────────────────────────────────────────────────────┐
│                    EXECUTION ORDER                           │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  1. Sync code runs first (call stack)                        │
│     → "1. Start"                                             │
│     → setTimeout callback → Task Queue                       │
│     → Promise callback → Microtask Queue                     │
│     → "2. End"                                               │
│                                                              │
│  2. Call stack empty → Check microtasks                      │
│     → Run ALL microtasks                                     │
│     → "3. Promise"                                           │
│                                                              │
│  3. Microtasks empty → Run ONE macrotask                     │
│     → "4. Timeout"                                           │
│                                                              │
└─────────────────────────────────────────────────────────────┘

---

Nested Microtasks

Microtasks can add more microtasks—all run before the next macrotask:

console.log('1. Start');

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

Promise.resolve()
  .then(() => {
    console.log('2. Promise 1');
    return Promise.resolve();
  })
  .then(() => {
    console.log('3. Promise 2');
  });

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

// Output: 1. Start, 2. Promise 1, 4. Promise 3, 3. Promise 2, 5. Timeout

---

Common Patterns

Deferring Execution:

// Run after current sync code
setTimeout(() => {
  console.log('Deferred');
}, 0);

// Higher priority deferring (microtask)
queueMicrotask(() => {
  console.log('Microtask deferred');
});

Breaking Up Long Tasks:

// BAD: Blocks the main thread
function processLargeArray(array) {
  for (let i = 0; i < array.length; i++) {
    heavyComputation(array[i]);
  }
}

// GOOD: Yields to event loop
function processLargeArrayAsync(array, index = 0) {
  if (index >= array.length) return;

  heavyComputation(array[index]);

  // Schedule next iteration
  setTimeout(() => {
    processLargeArrayAsync(array, index + 1);
  }, 0);
}

---

The Rendering Pipeline

In browsers, rendering happens between task queue processing:

┌─────────────────────────────────────────────────────────────┐
│                    FRAME LIFECYCLE                           │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────┐   ┌─────────────┐   ┌──────────┐   ┌─────────┐ │
│  │  Task   │ → │ Microtasks  │ → │  Render  │ → │  Task   │ │
│  └─────────┘   └─────────────┘   └──────────┘   └─────────┘ │
│                                                              │
│  Task: setTimeout, events, etc.                              │
│  Microtasks: Promises, queueMicrotask                        │
│  Render: requestAnimationFrame, style, layout, paint         │
│                                                              │
└─────────────────────────────────────────────────────────────┘

requestAnimationFrame:

// Runs before next paint (smooth animations)
function animate() {
  element.style.left = parseInt(element.style.left) + 1 + 'px';
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

---

Blocking the Event Loop

Long-running sync code blocks everything:

// DON'T DO THIS!
console.log('Start');

// Blocks for ~3 seconds
const end = Date.now() + 3000;
while (Date.now() < end) {
  // Busy loop - blocks event loop!
}

console.log('End');
// UI is frozen during the while loop

Signs of Blocking:

• •Unresponsive UI
• •Animations freeze
• •Click events delayed
• •"Page unresponsive" warnings

---

Node.js Event Loop Phases

Node.js has a more detailed event loop:

   ┌───────────────────────────┐
┌─►│           timers          │ ← setTimeout, setInterval
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │ ← I/O callbacks
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │ ← internal only
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           poll            │ ← new I/O events
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           check           │ ← setImmediate
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │ ← socket.on('close', ...)
   └───────────────────────────┘

process.nextTick vs setImmediate:

// process.nextTick - runs before the event loop continues
process.nextTick(() => console.log('nextTick'));

// setImmediate - runs in check phase (after I/O)
setImmediate(() => console.log('setImmediate'));

// Microtasks
Promise.resolve().then(() => console.log('promise'));

// Order: nextTick, promise, setImmediate

---

Summary

---

Key Rules to Remember

1. •Sync code runs first - always
2. •Microtasks before macrotasks - promises before timeouts
3. •ALL microtasks run before the next macrotask
4. •Don't block - keep sync code short
5. •setTimeout(fn, 0) doesn't mean "immediate" - it means "as soon as possible after current code"

---

Debugging Tips

1. •Use console.log with numbered messages to trace order
2. •Chrome DevTools Performance tab shows event loop blocking
3. •Look for long-running sync operations
4. •Use requestIdleCallback for non-urgent work

---

Next Steps

In the next section, we'll explore Memory Management—how JavaScript handles memory allocation and garbage collection.