Command Palette

Search for a command to run...

Hectal
Phase 10Intermediate11 of 16 in JavaScript

Asynchronous JavaScript

Blocking vs non-blocking code, timers, the event loop, callbacks, promises, combinators and async/await, with exact output you can predict.

JavaScript in a page runs on one thread: one list of instructions, done one at a time. Yet a page waits for servers, timers and clicks without freezing. This phase explains how: the browser does the waiting, and JavaScript is told when each result is ready.

You'll start with what blocking means and why it hurts, then learn timers, and then the most important picture in the language: the event loop, with its call stack, task queue and microtask queue. Once you can predict the order of any output, callbacks, promises and async/await stop being magic. They are just different ways of saying "run this later".

Every example is live and prints exact output, so you can predict first and then check. You'll need functions and closures from Phase 3 and events from Phase 9. Phase 11 builds directly on this one: fetch returns a promise.

0/8 · 0%
8 topics ~3 h 31 code blocks & diagrams
Start with the first topic
1
10.1

Synchronous vs Asynchronous Code

Synchronous code runs one line after another and each line must finish before the next starts; asynchronous code starts a slow job, carries on, and handles the result later, so the page never freezes while it waits.

20 min 3 code practice

2
10.2

Timers

setTimeout runs a function once after a delay and setInterval runs it again and again; both return an id you pass to clearTimeout or clearInterval to cancel, and every delay is a minimum, never an exact time.

20 min 4 code practice

3
10.3

The Event Loop

The event loop is the rule that decides what runs next: finish the current code until the call stack is empty, run every microtask (promise callbacks), let the browser paint if it's time, then take the next task (a timer, a click) and repeat.

21 min 4 code practice

4
10.4

Callbacks and Callback Hell

A callback is a function you pass to another function so it can call you back when a job finishes; it's the oldest way to handle async results, with an error-first convention, but nesting them gets messy and you must trust the code that calls them.

20 min 4 code practice

5
10.5

Promises

A promise is an object standing for a result that isn't ready yet: it starts pending and settles once, as fulfilled with a value or rejected with a reason, and you react with then, catch and finally.

20 min 4 code practice

6
10.6

Chaining and Error Handling with Promises

Every then, catch and finally returns a new promise, so you can chain steps: what a callback returns becomes the next step's value (and a returned promise is waited for), a throw skips ahead to the nearest catch, and a rejection nobody handles is reported as an unhandled rejection.

20 min 4 code practice

7
10.7

Promise.all, allSettled, race and any

Four static methods combine many promises into one: all waits for every one (and fails fast), allSettled waits for every outcome, race takes the first to settle, and any takes the first success.

20 min 4 code practice

8
10.8

async and await

async functions always return a promise, and inside them await pauses that function (not the page) until a promise settles, so async code reads top to bottom with ordinary try...catch; start independent jobs before awaiting them to keep them parallel.

27 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A countdown that stops itself

The page shows 3. Every 200 ms, count down: show and log 2, then 1.

Beginner
2

Put the event loop in order

The console should print the letters A, B, C, D, E, F, each on its own line, in that order.

Intermediate
3

Promise helpers: delay and a promisified API

1. Write delay(ms, value): it returns a promise that fulfils with value after ms milliseconds.

Intermediate
4

Give any promise a deadline

Write withTimeout(promise, ms). It returns a new promise that settles the same way as promise, unless ms milliseconds pass first: then it rejects with new Error("Timed out after <ms> ms"), for example Timed out after 100 ms.

Intermediate
5

A dashboard that loads in parallel

Three fake servers are given: getUser() (200 ms), getOrders() (300 ms) and getWeather() (fails after 250 ms). Don't change them.

Intermediate