setTimeout, fetch, and Promises With the Event Loop in JavaScript

setTimeout, fetch, and Promises With the Event Loop in JavaScript

setTimeout, fetch, and promises are the three most common async APIs. Here is how each interacts with the event loop.

setTimeout

setTimeout(() => console.log("timer"), 1000);
``
1. The Web API starts a timer for 1000ms.
2. The engine continues.
3. When the timer fires, the callback goes to the **macrotask queue**.
4. The event loop runs it when the stack is empty and microtasks are done.

`setTimeout` callbacks are macrotasks. They run after all microtasks.

### `fetch`

```js
fetch("/api").then((data) => console.log("data"));
``
1. The Web API starts a network request.
2. The engine continues.
3. When the response arrives, the `.then` callback goes to the **microtask queue**.
4. The event loop runs it when the stack is empty (before any macrotask).

`fetch` callbacks (via promises) are microtasks. They run before macrotasks.

### Promises

```js
Promise.resolve().then(() => console.log("promise"));
``
1. The promise resolves immediately.
2. The `.then` callback goes to the **microtask queue**.
3. The event loop runs it when the stack is empty (before any macrotask).

Promise callbacks are microtasks. They always run before macrotasks.

### Combined Example

```js
setTimeout(() => console.log("timeout"), 0);
fetch("/api").then(() => console.log("fetch"));
Promise.resolve().then(() => console.log("promise"));
console.log("sync");
``
**Output** (assuming fetch resolves quickly): `sync, promise, fetch, timeout` (or `sync, promise, timeout, fetch` if fetch is slow).

- `sync` runs first (stack).
- `promise` runs next (microtask, already resolved).
- `fetch` runs when the response arrives (microtask).
- `timeout` runs last (macrotask).

### Key Takeaways

- `setTimeout` → macrotask (runs after microtasks).
- `fetch` → microtask (via promise, runs before macrotasks).
- `Promise.then` → microtask (runs before macrotasks).
- Sync code → runs on the stack (first).
- Blocking the stack delays everything.

### The Takeaway

`setTimeout` callbacks are macrotasks (run after microtasks). `fetch` and `Promise.then` callbacks are microtasks (run before macrotasks). Sync code runs first on the stack. Understanding which queue each API uses explains all async timing.