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.

Runtime state

Read the phase rail first, then inspect the boxes below for what changed.

stack
You are here: Stack - Normal code runs first.
1Stack

Normal code runs first.

2Runtime

Timers wait outside JS.

3Promise

Promise state changes.

4Microtask

Promise callbacks run next.

5Task

Timers run after microtasks.

6Console

Logs appear in order.

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