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
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 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
javascript
setTimeout(function () {
// runs later
}, 1000);The delay is in milliseconds.
Every line here waits for the one before it.
That is fine when the work is fast.
Example
javascript
console.log("one");
console.log("two");
console.log("three");The order is exactly as written.
A long loop holds the single thread and nothing else can happen.
The page stops responding to clicks until it finishes.
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.
The rest of the program keeps going while the timer waits.
Example
javascript
setTimeout(function () {
console.log("later");
}, 10);
console.log("now");The output is now then later.
This is the mistake everyone makes first.
Reading the value on the next line gets it before it has arrived.
Example
javascript
let data = "nothing";
setTimeout(function () {
data = "arrived";
}, 10);
console.log(data);The output is nothing, because the timer has not run yet.
Anything that depends on the result belongs inside the callback.
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
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>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.
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.