Skip to main content

JavaScript Promises & Async/Await Simulator

Visualize JavaScript promises, async/await, microtasks, task queues, setTimeout ordering, rejection handling, and Promise.all with an interactive event-loop simulator inspired by classic JavaScript visual guides.

Category: Programming

Topics covered: javascript, promises, async-await, event-loop, microtasks, settimeout, nodejs, programming, frontend, backend, educational, interactive

// simulator

JavaScript Promises & Async/Await Simulator

Visualize JavaScript promises, async/await, microtasks, task queues, setTimeout ordering, rejection handling, and Promise.all with an interactive event-loop simulator inspired by classic JavaScript visual guides.

Supported byDigitalOceanDevDojoSMTPfastQuizAPIBecome a sponsor

// event loop lab

JavaScript Promises & Async/Await Simulator
step 1/6
1/6

Start in global execution

stack

The script begins on the call stack. Nothing async has been scheduled yet.

async-lab.js
1console.log('Start');
2
3setTimeout(() => console.log('Timeout'), 0);
4
5Promise.resolve('Promise').then(value => {
6 console.log(value);
7});
8
9console.log('End');
Mental model
1Run stack first.
2Drain microtasks before tasks.
3Timers and I/O wait as tasks.
4await resumes as a microtask.

Event loop trace

Follow the current callback from execution to queues and back to output.

stack
1. Run the stack
2. Drain microtasks
3. Run one task
Call Stack
2
global script
console.log('Start')
Runtime APIs
0
no external work
Promise Inspector
2
Promise.resolve: not created
value: -
Microtask Queue
0
no promise work queued
Task Queue
0
no timer or event tasks
Console
1
1. Start
Predict It

What gets printed first after Start?

About this JavaScript async simulator

What you'll learn

  • Why synchronous code runs before promise callbacks and timers
  • How fulfilled, rejected, and pending promise states affect handler execution
  • Why promise callbacks are microtasks, while timers are tasks
  • How async functions run until await and then resume later
  • How catch and finally behave after a promise rejection
  • How Promise.all waits for several async operations at once

Visual model covered

  • Call stack: currently executing synchronous JavaScript
  • Runtime APIs: timers, network work, and other browser or runtime-owned async work
  • Microtask queue: promise handlers, queueMicrotask callbacks, and async function continuations
  • Task queue: timer and event callbacks that run after microtasks drain

Inspired by a classic visual guide

This simulator is an original interactive companion inspired by Lydia Hallie's popular JavaScript visualized article on promises and async/await. It uses its own diagrams and step logic while covering the same core mental models.

Browser-safe by design

The simulator does not execute arbitrary JavaScript. Each scenario is modeled as a deterministic event-loop trace so learners can step backward, make predictions, and see exactly why the output order changes.

Try next

Sponsored
Carbon Ads
$ cd /games
// share