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 starts executing top to bottom on the call stack. console.log("start") runs synchronously and prints right away.

1 / 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

Callback queue

Console

01start

Fig. — Promise vs setTimeout · step 1 of 9

← → step · space play · 123 level