JavaScript Asynchronous
JavaScript Asynchronous
Asynchronous JavaScript starts a slow job and carries on without waiting for it.
JavaScript runs on a single thread, so it can only do one thing at a time.
If a slow job blocked that thread, the whole page would freeze.
Example
Example
javascript
console.log("first");
setTimeout(function () {
console.log("third");
}, 0);
console.log("second");The output is first, second, third.
The timer callback waits its turn, even with a delay of 0.
Synchronous and Asynchronous
Synchronous code runs line by line, and each line waits for the one before it.
Asynchronous code starts something and lets the rest of the program continue.
The result arrives later, through a callback, a promise, or await.
Syntax
Syntax
javascript
setTimeout(function () {
// runs later
}, 1000);The delay is in milliseconds.
Synchronous Code Blocks
Every line here waits for the one before it.
That is fine when the work is fast.
Example
Example
javascript
console.log("one");
console.log("two");
console.log("three");The order is exactly as written.
Why Blocking Matters
A long loop holds the single thread and nothing else can happen.
The page stops responding to clicks until it finishes.
Example
Example
javascript
let total = 0;
for (let i = 0; i < 1000000; i++) {
total += i;
}
console.log("finished counting");Nothing else could run while that loop was going.
Asynchronous Code Does Not Block
The rest of the program keeps going while the timer waits.
Example
Example
javascript
setTimeout(function () {
console.log("later");
}, 10);
console.log("now");The output is now then later.
The Result Is Not Ready Yet
This is the mistake everyone makes first.
Reading the value on the next line gets it before it has arrived.
Example
Example
javascript
let data = "nothing";
setTimeout(function () {
data = "arrived";
}, 10);
console.log(data);The output is nothing, because the timer has not run yet.
Use the Value Where It Arrives
Anything that depends on the result belongs inside the callback.
Example
Example
javascript
let data = "nothing";
setTimeout(function () {
data = "arrived";
console.log(data);
}, 10);Now the output is arrived, because it is read at the right moment.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Asynchronous</title>
</head>
<body>
<h1>Asynchronous JavaScript</h1>
<p id="out">Waiting...</p>
<script>
console.log("script started");
setTimeout(function () {
document.getElementById("out").textContent = "The timer finished";
}, 1000);
console.log("script finished");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try a longer delay:
Change 1000 to 3000 and notice the page stays usable while it waits.
Important Points
- JavaScript runs on a single thread.
- Synchronous code blocks everything until it finishes.
- Asynchronous code starts a job and lets the program continue.
- The result is not available on the next line.
- Use the result where it arrives, inside the callback.
Conclusion
Asynchronous code is what keeps a page responsive while slow work happens.
The hard part is not starting the work but knowing when the answer is ready.
The rest of this section is about handling that answer cleanly.