JavaScript Event Loop Visualizer

Visualize how JavaScript executes synchronous code, manages the call stack, and processes microtasks, timers, and asynchronous callbacks. Step through execution, inspect queues, and understand the event loop interactively in your browser.

JavaScript Code

0 characters

Example programs JavaScript source Auto Reset on source change

Event Loop Visualization

Active event Simulation ready.

Call Stack 0

Web APIs / Timers 0

Microtask Queue 0

Task Queue (Macrotasks) 0

Phaseidle

Iteration0

Steps0

Virtual time0 ms

This tool uses a controlled educational simulation of supported JavaScript syntax. Real browser scheduling, rendering, timer clamping, and task-source ordering can vary. The visualization demonstrates the execution rules implemented by this simulator, not every detail of a full JavaScript runtime.

Console Output

Console output will appear here.

Execution Timeline

Execution events will appear here.

Execution Details

Run the simulation to see execution details.

All Developer Tools

Browse free online tools for JSON, HTML, CSS, XML, JavaScript, data conversion, and everyday development tasks.

What Is a JavaScript Event Loop Visualizer?

A JavaScript Event Loop Visualizer is an interactive learning tool that shows how JavaScript executes synchronous code and schedules asynchronous callbacks. It helps you understand how the call stack, browser APIs, microtask queue, and task queue work together to determine the order in which code runs.

JavaScript code can include regular function calls, timers, Promise callbacks, event handlers, and asynchronous functions. Although these operations appear together in your source code, they do not all execute at the same time or enter the execution process in the same way.

Jomatter's JavaScript Event Loop Visualizer helps make these execution steps easier to understand. Instead of guessing why one console message appears before another, you can examine the execution flow and see how synchronous statements, microtasks, and timer callbacks are scheduled.

Whether you are learning JavaScript, debugging asynchronous code, or preparing for a technical interview, an event loop simulator can help turn abstract execution rules into a more understandable sequence of events.

Key principle: In a typical browser JavaScript execution context, synchronous code finishes first. Once the current task completes, pending microtasks are processed before the browser proceeds to another task.

Example: Understanding Execution Order

console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End");

Although the timer appears before the Promise in the source code, the expected output is Start, End, Promise, and then Timeout. The visualizer helps explain why the Promise callback runs before the timer callback.

How the JavaScript Event Loop Works

The JavaScript event loop coordinates the execution of tasks and queued callbacks. JavaScript executes a sequence of synchronous instructions on a call stack, while browser APIs and the runtime handle certain asynchronous operations. Their callbacks become eligible to run according to the relevant scheduling rules.

Synchronous code enters the call stack

JavaScript starts executing the current script. Function calls are added to the call stack and removed when their execution finishes.

Asynchronous operations are scheduled

Operations such as timers and network requests use browser or runtime facilities. Their callbacks do not simply interrupt the currently executing JavaScript.

Callbacks become ready to run

Promise reactions and other microtasks are queued as appropriate. Timer callbacks become eligible after their delay and are scheduled as tasks.

The current task finishes

The current synchronous execution completes before the event loop moves to the next stage of task processing.

The microtask queue is drained

Pending microtasks run until the queue is empty, including newly queued microtasks that are added while it is being processed.

The next task is processed

The runtime selects an eligible task, such as a timer callback, and executes it. Its completion is followed by another microtask checkpoint.

This cycle continues as the application responds to timers, user interactions, network activity, and other events. Browser rendering may also occur between tasks, depending on the browser's scheduling and rendering needs.

Important: The event loop does not mean every asynchronous operation executes simultaneously. JavaScript callbacks on the same main-thread execution context still run one at a time, even when external operations are handled asynchronously.

Call Stack, Web APIs, Microtasks, and Tasks

To understand asynchronous JavaScript, it helps to separate the different parts of the execution model. Each component has a specific responsibility, and a visualizer makes their relationships easier to follow.

Component	Purpose	Examples
Call stack	Tracks the currently executing function calls and execution contexts.	`main()`, regular function calls, nested functions.
Browser or runtime APIs	Handle operations such as timers, network requests, and event registration outside the immediate JavaScript call stack.	`setTimeout()`, `fetch()`, DOM events.
Microtask queue	Holds microtasks that are processed at a microtask checkpoint, generally after the current task completes.	`Promise.then()`, `queueMicrotask()`, code after `await`.
Task queue	Represents tasks that can be selected for execution by the event loop.	Timer callbacks, user interaction tasks, event callbacks.
Console output	Displays messages in the order that the corresponding statements execute.	`console.log()`, diagnostic messages.

The Call Stack

The call stack tracks function execution. When one function calls another, the new function's execution context is placed above the current one. When that function returns, its context is removed and execution resumes in the caller.

function first() { second(); } function second() { console.log("Inside second"); } first();

The first() function calls second(). The second function executes before control returns to the first function. A call stack visualization can show these nested calls entering and leaving the stack.

Browser and Runtime APIs

Some operations are managed by the browser or JavaScript runtime rather than by the currently executing call stack. For example, a timer registers a callback that can become eligible to run after its delay. A network request can progress while JavaScript continues executing other code.

When an asynchronous operation is ready, its callback is scheduled according to the API's rules. A timer delay is not a promise that the callback will execute at that exact moment.

The Microtask Queue

Microtasks include Promise reaction callbacks and callbacks scheduled with queueMicrotask(). They run at microtask checkpoints, such as after the current task completes. Newly queued microtasks are also processed before the checkpoint ends.

The Task Queue

Timer callbacks and many browser event callbacks are scheduled as tasks. The browser has scheduling rules that can involve different task sources, so the simplified idea of a single macrotask queue is useful for learning but does not describe every detail of browser scheduling.

Promise vs. setTimeout: A Step-by-Step Example

One of the most common JavaScript interview questions asks why a Promise callback can execute before a timer callback, even when the timer uses a delay of zero milliseconds.

Consider the following code:

console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End");

Expected Console Output

Start End Promise Timeout

Print Start

The first console.log() runs immediately as part of the synchronous script.

Register the timer callback

setTimeout() schedules a callback to become eligible after its delay. It does not execute the callback immediately.

Queue the Promise reaction

The callback passed to .then() is scheduled as a microtask because the Promise is already fulfilled.

Print End

The last synchronous statement runs before the current script finishes.

Run the Promise callback

After the current task finishes, the microtask checkpoint processes the queued Promise reaction and prints Promise.

Run the timer callback

Once the microtask queue has been drained, the event loop can process the eligible timer task and print Timeout.

Remember: setTimeout(fn, 0) does not mean "run immediately." It schedules a callback that can execute after the current task and its required microtask processing have completed.

Understanding async and await in the Event Loop

The async and await keywords make Promise-based code easier to read, but they do not make the code after an await execute synchronously. An async function runs synchronously until it reaches an await that suspends its execution.

When the awaited Promise settles, the suspended continuation is scheduled through Promise-related microtask processing. This is why code after an await can run after other synchronous statements in the surrounding script.

Async/Await Example

async function example() { console.log("1"); await Promise.resolve(); console.log("3"); } console.log("0"); example(); console.log("2");

Expected Output

0 1 2 3

The first message prints before the async function is called. Inside the function, 1 prints before the await suspends the continuation. The outer script then prints 2. Finally, the continuation resumes and prints 3.

Practical tip: When debugging async functions, identify the code that runs before each await and the code that resumes afterward. This distinction is often enough to explain an unexpected console output order.

Microtasks vs. Macrotasks

The terms microtask and macrotask are commonly used when teaching the JavaScript event loop. In browser terminology, the standard task queue is generally referred to as the task queue. Understanding the distinction helps you predict the ordering of Promise callbacks and timer callbacks in common examples.

Comparison	Microtasks	Tasks (Often Called Macrotasks)
Typical examples	`Promise.then()`, `queueMicrotask()`.	`setTimeout()`, many DOM event callbacks.
When processed	At microtask checkpoints, such as after the current task.	When the event loop selects an eligible task.
Queue processing	The queue is drained, including newly added microtasks, before proceeding.	A task is selected for execution; task selection follows runtime scheduling rules.
Common use	Promise reactions and scheduling work after the current synchronous execution.	Timer callbacks, user interactions, and other event-driven work.
Typical ordering example	A Promise reaction often runs before a timer scheduled in the same script.	A timer callback usually runs after the current task and pending microtasks.

Microtasks can enqueue additional microtasks. Those new microtasks are processed during the same checkpoint before the event loop moves on. If code continuously creates microtasks, it can delay the processing of other tasks and affect responsiveness.

Example with a Nested Microtask

console.log("Start"); Promise.resolve().then(() => { console.log("Promise 1"); Promise.resolve().then(() => { console.log("Promise 2"); }); }); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End");

Expected Output

Start End Promise 1 Promise 2 Timeout

The first Promise callback queues another microtask. The newly queued callback runs before the event loop moves to the eligible timer task, so both Promise messages appear before Timeout.

How to Use the JavaScript Event Loop Visualizer

A step-by-step visualizer is most useful when you connect each line of code to the corresponding change in execution state. Start with a small example, observe the output, and then add asynchronous operations one at a time.

Select a built-in example

Start with a simple synchronous example or a Promise-versus-timer example to learn the basic execution order.

Enter or review JavaScript code

Use the code editor to examine a snippet that contains function calls, Promises, timers, or async functions, depending on the features supported by the tool.

Run the visualization

Start the simulation to see the initial execution state and follow how the program moves through the available stages.

Step through execution

Use the next-step control, where available, to inspect changes to the call stack, API panel, microtask queue, and task queue.

Check the console output

Compare the order of printed messages with your original prediction to understand which operations execute synchronously and which are scheduled.

Reset and test another example

Change the order of a Promise, timer, or function call and run the example again to see how the execution sequence changes.

Depending on the implementation, the visualizer may also provide play, pause, reset, playback speed, previous-step navigation, current-line highlighting, and execution explanations. Available controls depend on the live tool interface.

Common JavaScript Event Loop Examples

Short examples are a practical way to learn the event loop. Predict the console output before running each snippet, then compare your answer with the actual execution order.

Example 1: Synchronous Code Runs First

console.log("A"); console.log("B"); console.log("C");

A B C

All three statements execute synchronously in source order. There are no asynchronous callbacks in this example.

Example 2: Promise and Timer

setTimeout(() => console.log("Timer"), 0); Promise.resolve().then(() => console.log("Microtask")); console.log("Sync");

Sync Microtask Timer

The synchronous message appears first. The Promise reaction then runs at the microtask checkpoint before the timer task is processed.

Example 3: Multiple Promise Callbacks

Promise.resolve().then(() => console.log("First")); Promise.resolve().then(() => console.log("Second")); console.log("Sync");

Sync First Second

The current script finishes before the Promise reactions execute. The two queued reactions then run in their scheduling order in this example.

Example 4: A Timer Schedules a Microtask

setTimeout(() => { console.log("Timer"); Promise.resolve().then(() => { console.log("Microtask inside timer"); }); }, 0); setTimeout(() => { console.log("Second timer"); }, 0);

Timer Microtask inside timer Second timer

In this example, after the first timer callback finishes its synchronous work, the microtask checkpoint processes the Promise reaction before another timer task runs. The illustrated ordering assumes the two timers become eligible in the shown order under normal browser scheduling.

Why Is the JavaScript Event Loop Important?

The event loop is central to how browser applications handle user interactions and asynchronous work. Understanding it helps developers write code that behaves predictably and diagnose problems involving delayed callbacks, unexpected console output, and unresponsive interfaces.

01 / Debugging

Understand Console Order

Identify why synchronous statements, Promise reactions, and timer callbacks appear in a particular order.

02 / Async Code

Understand Promises

See how .then(), async, and await interact with the current execution context and microtask processing.

03 / Performance

Recognize Blocking Work

Understand why long-running synchronous JavaScript can prevent the main thread from processing user input and other tasks promptly.

04 / Learning

Visualize Abstract Concepts

Turn queues, callbacks, and stack transitions into a sequence that is easier to observe and remember.

05 / Interviews

Practice Output Questions

Prepare for questions about Promises, timers, nested callbacks, async functions, and execution order.

06 / Development

Improve Async Reasoning

Build a stronger mental model for event-driven applications and asynchronous control flow.

Common Event Loop Mistakes

Many confusing JavaScript output questions come from a small number of misunderstandings. Learning these rules makes it easier to predict what happens when synchronous code, Promise callbacks, and timers are combined.

Assuming a Zero-Millisecond Timer Runs Immediately

setTimeout(callback, 0) schedules a timer callback. The callback cannot interrupt the current synchronous script and may run later than the requested delay.

Thinking All Asynchronous Callbacks Use the Same Queue

Promise reactions are microtasks, while timer callbacks are tasks. Their scheduling rules differ, which is why their output order can be predictable in common examples.

Assuming await Blocks the Entire Program

An await suspends the continuation of its async function when necessary. It does not block the JavaScript thread while waiting for a Promise to settle.

Confusing API Work with Callback Execution

A browser or runtime can handle an asynchronous operation outside the immediate call stack, but its JavaScript callback still needs to be scheduled and executed.

Assuming Every Browser Task Has One Universal Priority Order

Browser scheduling involves task sources and runtime-specific details. The simplified microtask-versus-task model is useful, but it should not be treated as a complete description of all scheduling behavior.

Ignoring Microtasks Created by Other Microtasks

Microtasks added during a microtask checkpoint are processed before the checkpoint finishes. Repeatedly creating microtasks can delay the processing of other tasks.

Expecting a Visualizer to Simulate Every JavaScript Feature

Educational simulators may support only a subset of JavaScript. Complex APIs, browser rendering, network timing, workers, and runtime-specific behavior may not be fully represented.

JavaScript Event Loop Visualizer Use Cases

An event loop visualizer can be useful for learning, debugging small snippets, teaching asynchronous programming, and preparing for JavaScript interviews. Different users can apply the same visual execution model to different tasks.

User	Typical Use Case
JavaScript beginners	Learn how synchronous execution differs from Promise and timer callbacks.
Front-end developers	Investigate callback ordering and reason about asynchronous UI behavior.
Students	Study the call stack, event loop, microtasks, and tasks using small code examples.
Interview candidates	Practice predicting output from Promises, timers, nested callbacks, and async functions.
Teachers and mentors	Demonstrate JavaScript execution order in lessons, tutorials, and workshops.
Experienced developers	Refresh core scheduling concepts when investigating unfamiliar asynchronous code.

Frequently Asked Questions

What is a JavaScript Event Loop Visualizer?

A JavaScript Event Loop Visualizer is a learning tool that demonstrates how JavaScript executes synchronous code and schedules asynchronous callbacks. It can display the call stack, microtask queue, task queue, and console output to explain execution order.

What does the JavaScript event loop do?

The event loop coordinates task execution and queued callbacks. In a typical browser execution cycle, microtasks are processed after the current task and before the next task begins.

What is the call stack in JavaScript?

The call stack tracks function execution. A function call adds an execution context to the stack, and the context is removed when that function finishes. This helps JavaScript manage nested function calls.

Why does Promise.then() run before setTimeout()?

Promise reaction callbacks are scheduled as microtasks, while timer callbacks are scheduled as tasks. When both are scheduled in the same ordinary script, the Promise reaction generally runs after the script finishes and before the eligible timer callback.

Does setTimeout(fn, 0) execute immediately?

No. It schedules a timer callback that can run after the current task and pending microtasks have completed. The zero-millisecond delay does not guarantee immediate execution.

What is a microtask in JavaScript?

A microtask is a callback processed at a microtask checkpoint. Common examples include Promise reaction callbacks and functions scheduled with queueMicrotask(). Microtasks are processed before the event loop proceeds to another task.

What is a macrotask in JavaScript?

Macrotask is a common informal term for a task in the event loop. Examples include timer callbacks and many event callbacks. Browsers use task scheduling rules that are more detailed than a single universal queue.

What is the difference between a microtask and a task?

Microtasks are processed at microtask checkpoints, usually after the current task. A task is selected by the event loop for execution. Pending microtasks are drained before the next task is processed.

Where does async/await fit into the event loop?

An async function runs synchronously until it reaches an await that suspends its continuation. Once the awaited Promise settles, the continuation resumes through Promise-related microtask processing.

Can JavaScript execute two callbacks at the same time?

On the same main-thread JavaScript execution context, callbacks run one at a time. Browsers and runtimes can perform other work asynchronously, and applications can use workers for separate execution contexts, but that is different from two callbacks running simultaneously on one call stack.

What happens when a microtask creates another microtask?

The newly queued microtask is normally processed during the same microtask checkpoint. The queue continues to be drained before the event loop moves to another task.

Can the event loop visualizer run custom JavaScript?

This depends on the tool's implementation. If a custom code editor is available, you can enter supported JavaScript snippets and inspect the simulated execution sequence. Some visualizers support only built-in examples or a limited subset of JavaScript syntax.

Can an event loop visualizer explain every browser behavior?

Not necessarily. A visualizer simplifies the execution model for learning. Browser rendering, task sources, network activity, workers, and runtime-specific scheduling may be more complex than the simulation can represent.

Why is the JavaScript event loop important for interviews?

Interview questions often test how well candidates understand synchronous execution, Promise callbacks, timers, and async/await. Visualizing the queues and call stack can help you predict output and explain the reasoning behind it.

Is the JavaScript Event Loop Visualizer free?

Jomatter's JavaScript Event Loop Visualizer is intended to help developers learn and explore JavaScript execution order online. Check the live tool interface for the features and usage limits currently available.

Is my JavaScript code private when using the visualizer?

Privacy depends on the tool's actual implementation. If code is processed entirely in the browser without network transmission, it does not need to be uploaded to a server for simulation. Check the implementation and privacy information before entering sensitive or proprietary code.

Understand JavaScript Execution with Jomatter

Jomatter's JavaScript Event Loop Visualizer helps make asynchronous JavaScript easier to understand by connecting source code with execution order. Explore how synchronous statements, function calls, Promise reactions, timers, and async functions interact.

Use small examples to see why synchronous code runs first, why Promise callbacks generally run before timer callbacks in common examples, and how microtasks created by other microtasks affect execution.

Whether you are learning JavaScript fundamentals, reviewing event loop concepts, or preparing for an interview, step-by-step execution is a practical way to strengthen your understanding of asynchronous programming.