Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 10.1 — Synchronous vs Asynchronous Code
JavaScript · Example 1 of 3

Blocking: a busy loop delays everything, even a 0 ms timer

The timer asked for 0 ms, but it couldn't run until the loop gave the thread back. A timer's delay is a minimum, never a promise.

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.

01

Write code that logs Start, then after 200 ms logs Middle, and logs End straight after Start. Predict the order.

02

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

01

What is the difference between synchronous and asynchronous code?

02

What does it mean that JavaScript in the browser is single-threaded, and why doesn't the page freeze while waiting for a server?

03

Why does setTimeout(fn, 0) not run fn immediately?

04

If async doesn't add threads, how do you keep a page responsive during heavy calculation?

Blocking: a busy loop delays everything, even a 0 ms timer

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

1. Start the timer (0 ms) and the slow work
2. Slow work finished
3. Timer finally ran. Waited at least 300 ms? true