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 0ms timer already expired, so the timeout callback enters the task queue — where it must wait, because the stack is still busy. Meanwhile console.log("end") runs.

4 / 9

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

promise cb

Callback queue

timeout cb

Console

01start
02end

Fig. — Promise vs setTimeout · step 4 of 9

← → step · space play · 123 level