No Login Data Private Local Save

Event Loop Visualizer - Online See Call Stack & Microtask Queue

Developer Tools Educational async event loop JavaScript visualizer
46
0
0
0

⚡ Event Loop Visualizer

Watch the JavaScript engine manage the call stack, microtask queue, and macrotask queue in real time.

Add Tasks
Controls
Call Stack

Stack is empty

Microtask Queue

Queue is empty

Macrotask Queue

Queue is empty

📘 Frequently Asked Questions

The event loop is the mechanism that allows JavaScript to execute code asynchronously and handle non‑blocking operations. It constantly checks if the call stack is empty and then processes tasks from the microtask and macrotask queues.

The call stack is a LIFO (last‑in‑first‑out) data structure that tracks function execution. When a function is called, it is pushed onto the stack; when it returns, it is popped off.

Microtasks are high‑priority tasks executed immediately after the current task finishes, before any macrotask. Common examples: Promise.then(), queueMicrotask(), and MutationObserver.

Macrotasks (or just "tasks") are lower‑priority tasks. Only one macrotask is processed per event‑loop iteration. Examples: setTimeout, setInterval, I/O callbacks, and UI rendering.

Because the microtask queue is emptied completely after each task (and before the next macrotask). A pending Promise callback is a microtask, while a setTimeout callback is a macrotask – so microtasks always win.

While processing the microtask queue, if a microtask schedules another microtask, that new microtask is added to the same queue and will be executed in the same cycle – until the queue is empty.

Absolutely! Use the tool above – add tasks and press Step to walk through the event‑loop cycle exactly as a browser engine does.
🔧 Related Tools