The Event Loop, Visualized

Promise vs setTimeout — interactive event loop example

1console.log('start');
2 
3setTimeout(() => {
4  console.log('timeout');
5}, 0);
6 
7Promise.resolve().then(() => {
8  console.log('promise');
9});
10 
11console.log('end');

The script finished; the call stack is empty. Now — and only now — the event loop gets to pick what runs next.

5 / 9

Call stack

Web APIs — browser land

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

Microtask queue — priority

promise cb

Callback queue

timeout cb

Console

01start
02end

Fig. — Promise vs setTimeout · step 5 of 9

← → step · space play · 123 level