./prontouso.com

DEVELOPER TOOLS

JavaScript Event Loop Simulator

Build a sequence or paste supported JavaScript statements to model synchronous code, microtasks, timers, animation callbacks, and Node.js nextTick step by step.

Tool statusRuns in your browser
Preview
~/js/event-loop-simulator
SIMULATOREVENT LOOP LIVE
Presets & Common Scenarios

Standard interview puzzle: synchronous console.log, setTimeout(0), Promise.then, and final log.

Script (Source Order)

Interactive step-by-step model of the Call Stack, Microtask Queue, Task Queue, animation callbacks, and Node.js nextTick.

ms
Total Steps
4
Sync Calls
2
Microtasks
1
Macrotasks
1
Loop Cycles
2
Cycle 1Snapshot 1 of 12
Event Loop Phase & Model Rule

Evaluating the synchronous script on the Call Stack.

Call Stack (LIFO)1
<main script>STACK
Microtask Queue / Job Queue (FIFO)0
(No pending microtasks)
Task Queue / Macrotask Queue (FIFO)0
(No pending macrotasks)
Web APIs & Timers0
(No active timers)
Console Log Output
(No console logs printed yet)

How it works

  1. Enter your input

    Fill in the values, paste your text, or upload the file this tool works with.

  2. See results instantly

    Most tools update live as you type; a few use a single button. Either way, the result appears right on this page.

  3. Use your results

    Copy, download, or share what the tool produces — you're always in control of the output.

Privacy and processing — Runs locally in your browser. This tool does not upload your input.

What is JavaScript Event Loop Simulator?

The JavaScript Event Loop Simulator models execution order for synchronous statements, Promise and queueMicrotask jobs, setTimeout callbacks, requestAnimationFrame, and Node.js process.nextTick without executing the code.

UNDERSTAND THE TOOL

How the JavaScript event loop simulator works

Choose a preset, build a sequence, or enter supported JavaScript statements to inspect a deterministic model of the call stack and task queues step by step.

The ordering rules represented by the model

  • All synchronous code runs first, top to bottom.
  • In the Node.js example, process.nextTick callbacks run before the regular Promise and queueMicrotask queue.
  • Promise .then and queueMicrotask callbacks drain before the next timer callback in this model.
  • Timers are ordered by their entered delay, with source order kept when delays match; the animation-frame preset also shows the model's separate pre-render callback phase.

How to use it

  • Start with a preset, or add statements in the Visual Builder and choose each statement's task type.
  • Set a non-negative millisecond delay for setTimeout tasks and add nested work when a callback schedules another statement.
  • Use the step controls and queue view to follow state changes, or open the table for the final modeled order.
  • Copy the normalized JavaScript, simulated output, or complete trace when you need to compare the result elsewhere.

What the simulator intentionally simplifies

The editor recognizes the supported statement patterns and turns them into labels for a local ordering model. It does not execute arbitrary JavaScript, resolve variables, run network requests, or reproduce exceptions and return values.

Timer delays are used to establish deterministic relative order rather than simulate wall-clock time. requestAnimationFrame depends on a real browser's rendering opportunities, and process.nextTick belongs to Node.js, so those presets explain separate runtime concepts instead of claiming one universal timeline.

Classic ordering example

sync, timeout, promise, sync

Synchronous logs run first, then the promise microtask, then the timeout macrotask.

log(1); setTimeout(2); Promise.then(3); log(4) -> 1, 4, 3, 2

Local model, no code execution

Statements and labels stay in browser memory for this page. They are not uploaded, stored by the tool, or executed as JavaScript; only aggregate tool interactions can be counted by consent-based analytics.

Frequently Asked Questions

Why does the Promise callback run before setTimeout(fn, 0)?

Because the microtask checkpoint drains queued Promise callbacks before the event loop selects the next timer task. A 0 ms delay makes the timer eligible; it does not interrupt the current task or its microtasks.

Does this cover async/await?

Yes, as a modeled continuation: the async/await preset and supported lines containing await represent the work after await as a microtask. The tool does not execute the async function or resolve its value.

Does this reproduce every browser and Node.js timing detail?

No. The core synchronous and microtask checkpoint order is represented, but timer timing, rendering opportunities, and Node.js phases involve runtime details outside this deterministic model. The rAF and process.nextTick presets should be read as separate browser and Node.js examples.

How are macrotasks with the same delay ordered?

The simulator sorts macrotasks by delay and keeps source order for ties, matching the stable ordering used in the model.

Does the JS Code Editor run the code I paste?

No. It recognizes supported console.log, setTimeout, Promise/.then, queueMicrotask, requestAnimationFrame, process.nextTick, and await patterns, then converts them into model steps. Unsupported JavaScript is treated as a label rather than executed.

Related Tools