How setTimeout Works Behind the Scenes in JavaScript

How setTimeout Works Behind the Scenes in JavaScript

setTimeout is one of the most used Web APIs in JavaScript. But it does not work the way most people think. Understanding the mechanism prevents bugs.

What setTimeout Does

setTimeout(callback, delay, ...args);
``
1. The engine calls the **Web API** (provided by the browser or Node.js).
2. The Web API starts a timer for `delay` milliseconds.
3. The engine continues running synchronous code (it does not wait).
4. When the timer fires, the callback is pushed to the **macrotask queue**.
5. The **event loop** moves the callback to the call stack **only when the stack is empty**.

### The Key Insight

`setTimeout` does **not** guarantee that the callback will run exactly after `delay`. It guarantees a **minimum** delay. The actual delay depends on:

- **The call stack**: if synchronous code is still running, the callback waits.
- **The microtask queue**: the event loop drains all microtasks before any macrotask. If microtasks keep coming, the callback waits.
- **Timer throttling**: browsers throttle timers in background tabs (often to 1 second minimum).
- **Nested timers**: browsers may throttle deeply nested `setTimeout` calls (minimum 4ms after 5 nested levels).

### Example: `setTimeout(cb, 0)` Does Not Run Immediately

```js
console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
``
**Output**: `1, 3, 2`. The callback goes to the queue. The event loop runs it after the synchronous code finishes.

### Example: Microtasks Delay the Timer

```js
setTimeout(() => console.log("timer"), 0);
Promise.resolve().then(() => console.log("promise"));
console.log("sync");
``
**Output**: `sync, promise, timer`. The promise callback (microtask) runs before the timer callback (macrotask), even though both have 0 delay.

### Example: Blocking the Stack

```js
setTimeout(() => console.log("timer"), 0);
function block() {
  const start = Date.now();
  while (Date.now() - start < 5000) {} // 5 seconds
}
block();
``
**Output**: `timer` (after 5 seconds). The callback was in the queue, but the stack was blocked. It ran only after `block` returned.

### The Takeaway

`setTimeout` hands the timer to a Web API, continues running synchronous code, and queues the callback when the timer fires. The event loop runs the callback only when the stack is empty and microtasks are done. `setTimeout` does not guarantee exact timing; it guarantees a minimum delay. Blocking the stack delays timers.