JavaScript Asynchronous
The event loop decides what runs next when the call stack is empty.
This is the mechanism behind everything in this section.
It also explains one of the most common interview questions in JavaScript.
Example
javascript
console.log("first");
setTimeout(function () {
console.log("fourth");
}, 0);
Promise.resolve().then(function () {
console.log("third");
});
console.log("second");The output is first, second, third, fourth.
The promise runs before the timer, even though the timer was scheduled first.
The call stack runs your code, one thing at a time.
The task queue holds timer and event callbacks.
The microtask queue holds promise callbacks, and always goes first.
Syntax
javascript
// stack empties -> all microtasks -> one task -> repeatMicrotasks are drained completely before the next task.
Nothing queued can run until the current code has finished.
Example
javascript
setTimeout(function () {
console.log("last");
}, 0);
for (let i = 0; i < 3; i++) {
console.log("loop " + i);
}The whole loop finishes before the timer callback gets a turn.
A promise callback is a microtask.
Every microtask runs before the next timer callback, whatever the delay.
Example
javascript
setTimeout(function () {
console.log("timer");
}, 0);
Promise.resolve().then(function () {
console.log("promise");
});The output is promise then timer.
A microtask that queues another still runs before any task.
The queue is drained completely, not one at a time.
Example
javascript
setTimeout(function () {
console.log("timer");
}, 0);
Promise.resolve()
.then(function () {
console.log("promise one");
return Promise.resolve();
})
.then(function () {
console.log("promise two");
});Both promise steps run before the timer.
Nothing in either queue can run while the stack is busy.
That includes clicks, rendering and timers.
Example
javascript
const started = Date.now();
setTimeout(function () {
console.log("the timer was delayed by the loop");
}, 0);
while (Date.now() - started < 30) {
// deliberately blocking
}
console.log("loop finished");The timer could not fire until the blocking loop released the thread.
Code after an await is resumed as a microtask.
Example
javascript
async function run() {
await Promise.resolve();
console.log("after await");
}
setTimeout(function () {
console.log("timer");
}, 0);
run();
console.log("sync");The output is sync, after await, timer.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Event Loop</title>
</head>
<body>
<h1>The Event Loop</h1>
<p id="out"></p>
<script>
const order = [];
setTimeout(function () {
order.push("timer");
document.getElementById("out").textContent = order.join(" → ");
}, 0);
Promise.resolve().then(function () {
order.push("promise");
});
order.push("synchronous");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try predicting first:
Write down the order you expect before running it, then check.
The event loop is why asynchronous JavaScript behaves the way it does.
Microtasks before tasks explains almost every ordering puzzle you will meet.
It is also one of the most reliably asked interview questions.