← Back to the explainers

Two ways to wait

The same slow task, handled two ways. One freezes the whole page until it finishes. The other hands it off and carries on. Run them side by side and watch the difference.

Synchronous

Code runs one line at a time. When a slow step runs, everything else waits for it. The page can freeze until it is done.

Asynchronous

The slow step runs in the background while the rest of the code keeps going. The page stays responsive, things happen at once.

Race them

Both start at the same instant. Watch the synchronous side sit blocked on the slow task while the asynchronous side races ahead and lets it finish in the background.

2000 ms
Synchronousblocking
Asynchronousnon-blocking

The trap students hit

Asynchronous does not automatically mean parallel. Awaiting inside a loop quietly runs requests one after another. It is the single most common mistake.

SlowerOne at a time

FasterAll at once

Take it with you

Put this demo in your class

This is one self-contained file, no logins and nothing to install. Copy the code straight into your learning system, or download it and host it wherever you like. It runs in any browser, offline.

To use it: paste the code into any page or learning system, or open the downloaded file in a browser. It runs anywhere, offline.
Copied