Lesson 18 · Async JavaScript

The event loop

JavaScript runs your code on one thread, one thing at a time, so it never stops to wait. Follow an eight-line script that prints start, end, promise, timeout: watch frames pile up on the call stack, two callbacks wait in the task queue and the microtask queue, and the event loop move them back onto the stack once it is empty, microtasks first.

10 min10 steps5 questionsIntermediate

Fig 18 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01What does order.js print, in order?

The script runs to the end first (start, end). Then the event loop runs every microtask (promise) before the next task (timeout).

02setTimeout(fn, 0) is called. When does fn run?

0 ms is only the shortest wait. The callback waits in the task queue until the call stack is empty and the microtask queue has been emptied.

03Where does the callback of Promise.resolve().then(cb) wait?

The promise is already fulfilled, so .then queues cb as a microtask at once. Promise callbacks are microtasks.

04What is the call stack?

Each call pushes a frame; when the function returns, its frame comes off. JavaScript runs whatever is on top.

05A click handler starts a loop that takes 3 seconds. What happens to a timer that was due after 1 second?

Code runs to completion. The event loop can only move the timer's callback onto the stack once the stack is empty, so a slow function delays everything.

Key terms

Glossary

Call stack: The pile of function calls that are running right now. A call pushes a frame on top; when it returns, the frame comes off.
Callback: A function you hand to something else to run later, such as the arrow function given to setTimeout or .then.
Host: The program JavaScript runs inside, such as a web browser or Node.js. It provides timers, queues and the event loop.
Task: A piece of work the event loop runs one at a time, such as a script or a timer's callback. Tasks wait in a task queue.
Microtask: A smaller job, such as a promise callback, that runs as soon as the stack is empty and before the next task.
Event loop: The host's loop that, whenever the call stack is empty, runs every waiting microtask, then takes the next task, and repeats.
Promise: An object for a value that may arrive later. Its .then callbacks run as microtasks once it is fulfilled.

Fine print

Notes and sources

One thread means one call stack per agent, such as a page or a Node.js process. Web Workers run other scripts on other threads, each with its own stack and event loop.
A delay of 0 ms is the shortest wait, not a promise of speed. Browsers make deeply nested timers wait at least 4 ms, and Node.js turns a delay below 1 into 1 ms. Either way the callback waits for an empty stack and for every microtask.
The figure shows the timer queuing its callback while the script still runs. The exact moment depends on the host; the printed order does not, because nothing leaves a queue until the script has finished.
Task queue is the HTML Standard's name (people also say macrotask). The ECMAScript spec calls promise callbacks Jobs and asks the host to queue them; browsers and Node.js run them as microtasks. Node.js has its own loop phases but prints the same order here.
The script is real. Save it as order.js and run node order.js, or paste it into a browser's console: it prints start, end, promise, timeout.

Quiz Unlocks after the last step.