⚡ FREE · INTERACTIVE

Event Loop Visualizer: Watch JavaScript Run Step by Step

See exactly when console.log, promises and setTimeout run, one step at a time.

🧠 Call stack and queues
⏭️ Step forward and back
✍️ Write your own example

How to use the JavaScript Event Loop Visualizer

1. Pick or write a programStart with an example or type your own using log, timeout, promise and microtask.
2. Run the visualizerPress Run to build the timeline and see the final console order.
3. Step through itUse Next and Back to watch each callback move between the boxes.

The order JavaScript follows

JavaScript has one call stack. While code runs, async work is handed to the browser. When it finishes, its callback waits in a queue. The event loop follows a fixed order:

Run all the normal (synchronous) code until the stack is empty.
Run every microtask: promise .then callbacks and queueMicrotask. New microtasks added now also run.
Take one task, such as a setTimeout callback, run it, then go back to step 2.

Worked example: the first preset logs A, sets a 0ms timeout that logs B, adds a promise that logs C, then logs D. The visualizer prints A → D → C → B. A and D are synchronous. C is a microtask, so it beats the timer even though the timer has a delay of 0.

How this visualizer models your code

To keep it safe and exact, the tool does not run real JavaScript. You write a small program using four words, and it shows the matching JavaScript beside it:

log A becomes console.log("A")
timeout 100 { ... } becomes setTimeout(() => { ... }, 100)
promise { ... } becomes Promise.resolve().then(() => { ... })
microtask { ... } becomes queueMicrotask(() => { ... })

Blocks can be nested, so you can put a promise inside a timeout and see that its callback runs before the next timer. Timers with the same delay fire in the order they were created. This is the same model browsers and Node.js follow for these features. It does not model rendering, I/O or async/await lines directly, though await behaves like a promise callback.

Frequently asked questions

Why does Promise.then run before setTimeout with 0 ms?

Promise callbacks are microtasks. The event loop empties the whole microtask queue before it takes the next task from the task queue, where timer callbacks wait.

Does setTimeout(fn, 0) run immediately?

No. It runs after the current script and all microtasks finish, and browsers may also add a small minimum delay.

Is this a common interview question?

Yes. Output-order questions with promises and setTimeout are very common in JavaScript and front-end interviews.

Is the visualizer free?

Yes. Type and edit programs as much as you like. The first time you press Run we ask for your name and WhatsApp number, once for all Uncodemy tools.

More free tools

See all free tools