setTimeout and the Event Loop: Their Relationship in JavaScript

setTimeout and the Event Loop: Their Relationship in JavaScript

setTimeout and the event loop are deeply connected. Understanding how the event loop processes timer callbacks explains all timer behavior.

The Components

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

How setTimeout Interacts With the Event Loop

1. You call setTimeout(cb, 1000).
2. The Web API starts a timer for 1000ms.
3. The engine continues running synchronous code (it does not wait).
4. When the timer fires, cb is pushed to the macrotask queue.
5. The event loop checks: is the call stack empty? Are all microtasks done?
6. If yes, the event loop moves cb from the macrotask queue to the call stack.
7. cb 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. The event loop drains the microtask queue: `promise` runs.
5. The event loop takes one macrotask: `timeout` runs.

### Nested `setTimeout` and the Event Loop

```js
setTimeout(() => {
  console.log("first");
  setTimeout(() => {
    console.log("second");
  }, 0);
}, 0);
``
**Output**: `first, second`. The inner `setTimeout` queues its callback. The event loop runs it after the outer callback finishes and microtasks are done.

### Blocking the Stack Delays Timers

```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 (3 seconds).

### Microtasks Can Delay Macrotasks

If a microtask keeps adding more microtasks, the event loop never reaches the macrotask queue:

```js
setTimeout(() => console.log("never?"), 0);
function infiniteMicrotask() {
  Promise.resolve().then(infiniteMicrotask);
}
infiniteMicrotask();
// "never?" is never logged (microtasks starve the macrotask queue)
``
### The Takeaway

`setTimeout` callbacks go to the macrotask queue. The event loop runs them only when the call stack is empty and all microtasks are done. This is why `setTimeout(cb, 0)` does not run immediately, why promises run before timers, and why blocking the stack delays timers. Microtasks can starve macrotasks.