Asynchronous: order now, collect later
Both sync lines run first. The callbacks run later, in order of when their timers finish, not the order they were written.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write code that logs Start, then after 200 ms logs Middle, and logs End straight after Start. Predict the order.
This code is meant to print Loaded: yes but prints Loaded: no. Fix it without changing the 100 ms delay.
let loaded = "no"; setTimeout(() => { loaded = "yes"; }, 100); console.log("Loaded:", loaded);
Explain it without notes
What is the difference between synchronous and asynchronous code?
What does it mean that JavaScript in the browser is single-threaded, and why doesn't the page freeze while waiting for a server?
Why does setTimeout(fn, 0) not run fn immediately?
If async doesn't add threads, how do you keep a page responsive during heavy calculation?
Preview
Console
Nothing logged yet.Expected console output
Order a coffee
Read the newspaper while waiting
Toast is ready
Coffee is ready