JavaScript Event Loop Simulator
Build a small script out of synchronous code, microtasks, and macrotasks to see the exact order the JavaScript event loop runs it in.
Script (in source order)
Execution order
| Step 1 | console.log('1') | Sync (console.log) |
|---|---|---|
| Step 2 | console.log('4') | Sync (console.log) |
| Step 3 | Promise.resolve().then(() => log('3')) | Microtask (Promise.then) |
| Step 4 | setTimeout(() => log('2'), 0) | Macrotask (setTimeout) |
How the JavaScript event loop simulator works
Build a small script out of synchronous code, microtasks, and macrotasks to see the exact order the JavaScript event loop would run it in.
The event loop's rules
- All synchronous code runs first, top to bottom.
- Once the synchronous code finishes, the entire microtask queue (Promise .then callbacks, queueMicrotask) drains before anything else runs.
- Then the next macrotask (setTimeout, setInterval) runs, immediately followed by draining the microtask queue again — and this repeats for each macrotask.
How to use it
- Add steps and mark each as sync, microtask, or macrotask.
- Give a macrotask a delay in milliseconds — it affects the order relative to other macrotasks.
- Read the computed execution order on the right.
Common gotchas
A `setTimeout(fn, 0)` never runs before a `Promise.resolve().then(fn)`, even with a 0ms delay — every microtask always drains before the next macrotask starts. This surprises most people the first time they see it.
Privacy
Runs locally in your browser. No data is sent to the server.
FAQ
Why does the Promise callback run before setTimeout(fn, 0)?
Because microtasks always fully drain before the event loop picks up the next macrotask, regardless of the macrotask's delay — a 0ms timeout is not "immediate", it's just the shortest possible macrotask delay.
Does this cover async/await?
Not directly as its own step type, but async/await is built on promises under the hood — an `await` suspends and resumes as a microtask, the same as a `.then()` callback would.
Is this ordering guaranteed across all browsers?
Yes — the relative ordering of "microtasks fully drain between macrotasks" is part of the HTML/ECMAScript specification, not an implementation detail, so every spec-compliant JavaScript engine follows it.