The Event Loop, Visualized

Break the Event Loop ⭐

Turn the knobs — every change re-runs the visualization instantly. Discover why order depends on where work is queued, not the order you wrote it in.

Timer delay
Promise chain depth
Blocking loop
Nested timeouts
1console.log('script start');
2 
3setTimeout(() => {
4  console.log('timeout fired');
5}, 0);
6 
7Promise.resolve()
8  .then(() => { console.log('microtask 1'); })
9  .then(() => { console.log('microtask 2'); })
10  .then(() => { console.log('microtask 3'); })
11  .then(() => { console.log('microtask 4'); })
12  .then(() => { console.log('microtask 5'); });
13 
14console.log('script end');

The script starts executing top to bottom on the call stack.

1 / 25

Call stack

script

Web APIs — browser land

The event loop — is the call stack empty? → drain the microtask queue first → then take one callback.

Microtask queue — priority

Callback queue

Console

Fig. — your settings, as the event loop runs them · step 1 of 25

The URL holds these settings — copy it to share this experiment.

← → step · space play