JavaScript Event Loop Visualizer

Paste any JavaScript code and see exactly how the Event Loop processes it — synchronous code, microtasks (Promises), and macrotasks (setTimeout).

Preset Scenarios
script.js — Paste your code here

Visualization will appear here

Choose a preset or write your code, then click Run Visualization

How the JavaScript Event Loop Works

Understanding the Event Loop is the key to writing predictable async JavaScript. Here's a plain-English breakdown of what's actually happening under the hood.

Visual Flow
📄 Your Code
sync
📚 Call Stack
when empty
⟲ Event Loop
1st
2nd
⚡ Micro
Promises
🕐 Macro
setTimeout
executes
>_ Console
Golden Rule

Microtasks always run before macrotasks — no exceptions.

JavaScript does one thing at a time

JavaScript runs your code line by line, one step at a time. Think of it like a stack of tasks — it picks up the top one, finishes it, then moves to the next. This is called the Call Stack.

So the question is — if JS can only do one thing, how does setTimeout or a network request work without freezing the whole page?

The browser does the waiting

When you write setTimeout(fn, 1000), JavaScript doesn't wait around for 1 second. It hands the job to the browser and immediately moves on. The browser handles the timer quietly in the background.

When the timer finishes, the browser puts your function in a waiting line (queue). The Event Loop keeps an eye on that line and runs your function as soon as JavaScript is free.

There are two waiting lines

Not all waiting functions are equal. Promises (.then(), .catch()) go into the Microtask Queue — the fast lane. Timers (setTimeout, setInterval) go into the Macrotask Queue — the slow lane.

The Event Loop always clears every Promise in the fast lane before touching anything in the slow lane. Even setTimeout(..., 0) has to wait.

See it in action

What order does this print?

console.log('1');           // runs first (sync)

setTimeout(() => {
  console.log('4');         // slow lane — runs last
}, 0);

Promise.resolve().then(() => {
  console.log('3');         // fast lane — runs before setTimeout
});

console.log('2');           // runs second (sync)

Output: 1, 2, 3, 4. Steps 1 and 2 are sync so they run immediately. Then JS is free — it checks the fast lane (Promise) and prints 3. Only after that does it check the slow lane (setTimeout) and print 4. Even though the delay was 0ms.

The loop in plain steps

  1. 1.Is JavaScript done with what it's running? If not, wait.
  2. 2.Run everything in the Promise fast lane (microtasks) until it's empty.
  3. 3.Run one item from the timer slow lane (macrotask).
  4. 4.Go back to step 1. This repeats forever.