The Event Loop and Callbacks in JavaScript

The Event Loop and Callbacks in JavaScript

The event loop is the mechanism that runs callbacks when the call stack is empty. Understanding it explains all callback timing.

The Components

• Call Stack: where JS code runs, one at a time.
• Web APIs: browser-provided async operations (setTimeout, fetch, DOM events).
• Macrotask Queue: callbacks from setTimeout, setInterval, I/O, events.
• Microtask Queue: callbacks from Promise.then, queueMicrotask.
• Event Loop: moves callbacks from queues to the stack.

How a Callback Gets Called

1. You call setTimeout(cb, 1000).
2. The Web API starts a timer for 1000ms.
3. The engine continues running synchronous code.
4. When the timer fires, cb goes to the macrotask queue.
5. The event loop checks: is the stack empty? Are microtasks done?
6. If yes, cb is moved to the stack and runs.

Order of Execution

console.log("sync");
setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
``
**Output**: `sync, promise, timeout`.

1. `sync` runs on the stack.
2. `timeout` callback goes to the macrotask queue.
3. `promise` callback goes to the microtask queue.
4. Stack is empty. Drain microtasks: `promise` runs.
5. Take one macrotask: `timeout` runs.

### Microtasks vs Macrotasks

- **Microtasks** (promise callbacks, `queueMicrotask`): run after the current task, before the next macrotask. The event loop drains all microtasks before any macrotask.
- **Macrotasks** (`setTimeout`, `setInterval`, I/O, events): run one at a time, with microtasks drained after each.

### Blocking Delays Everything

```js
setTimeout(() => console.log("timer"), 1000);
function block() {
  const start = Date.now();
  while (Date.now() - start < 3000) {} // 3 seconds
}
block();
``
**Output**: `timer` (after 3 seconds). The timer fired at 1 second, but the callback was queued. The event loop could not run it until `block` returned.

### The Takeaway

The event loop runs callbacks when the call stack is empty and all microtasks are done. Microtasks (promises) always run before macrotasks (timers, events). Blocking the stack delays all queued callbacks. Understanding this order explains all callback timing in JavaScript.