← Running Async Tasks in Parallel Asynchronous Fetch API →

JS AsyncLesson #244

Asynchronous Event Loop

JavaScript can only execute one piece of code at a time.

While JavaScript is busy, other JavaScript code must wait.

How do JavaScript handle timers, user clicks, downloads, and asynchronous operations?

The answer is the Event Loop.

Understanding the Event Loop

Understanding the Event Loop explains many common JavaScript behaviors.

Why setTimeout(..., 0) does not execute immediately.
Why long loops freeze a page.
Why Promises execute before timers.
Why await does not block the browser.
Why click events wait until current code has finished.

JavaScript Executes One Task at a Time

JavaScript executes code in sequence.

Only one function can execute at any given moment.

Functions execute in the order they are called.

Each function must finish before the next one can begin.

Examples

Example Code

javascript

Try it Yourself

function step1() {

  myDisplayer("Step 1");

}

function step2() {

  myDisplayer("Step 2");

}

step1();

step2();

The Browser Performs Asynchronous Work

JavaScript itself does not wait for timers or download web pages.

Instead, the browser performs these operations while JavaScript continues running.

Examples include:

Timers
Network requests
User events
File loading

When an operation finishes, JavaScript is notified that the result is ready.

The Event Loop

The Event Loop continuously checks whether JavaScript is busy.

When JavaScript finishes its current task, the Event Loop starts the next waiting task.

This process repeats for as long as the page is open.

Example

Example Code

javascript

Try it Yourself

JavaScript starts

&#8595;

Run code

&#8595;

Start timer

&#8595;

Continue running

&#8595;

Timer finishes

&#8595;

Event Loop

&#8595;

Run callback

The Event Loop coordinates asynchronous operations and decides when JavaScript should execute the next task.

Example: setTimeout()

The callback is not executed immediately.

Instead, it waits until JavaScript finishes its current work.

Example

Example Code

javascript

Try it Yourself

myDisplayer("A");

setTimeout(function() {

  myDisplayer("B");

}, 2000);

myDisplayer("C");

The timer finishes almost immediately.

However, the callback cannot run until JavaScript finishes executing the current code.

The Event Loop starts the callback after the current task has completed.

Example: Promise

Example

Example Code

javascript

Try it Yourself

myDisplayer("A");

Promise.resolve().then(function() {

  myDisplayer("B");

});

myDisplayer("C");

Why did the Promise callback run before the timer?

The answer is that Promise callbacks are placed in a special queue with higher priority.

Task Queue and Microtask Queue

JavaScript uses two main queues for asynchronous work.

Queue	Contains
Task Queue	Timers, events, messages
Microtask Queue	Promise handlers and awai

After each task finishes, JavaScript processes all waiting microtasks before starting the next task.

Comparing Timers and Promises

Operation	Queue
setTimeout()	Task Queue
setInterval()	Task Queue
Click event	Task Queue
Promise.then()	Microtask Queue
catch()	Microtask Queue
finally()	Microtask Queue
await continuation	Microtask Queue

Long Tasks Block JavaScript

If JavaScript executes a long-running task, everything else must wait.

During this time, the browser cannot execute other JavaScript code.

User clicks, timers, and completed downloads must wait until the current task finishes.

Example

Example Code

javascript

Try it Yourself

function wait() {

  let i = 4e9;

  while (--i > 0);

}

myDisplayer("Start");

wait();

myDisplayer("Done");

Example Explained

JavaScript starts

&#8595;

myDisplayer("Start")

(DOM changes)

&#8595;

wait()

(JavaScript busy)

&#8595;

myDisplayer("Done")

(DOM changes again)

&#8595;

JavaScript finishes

&#8595;

Browser repaints

&#8595;

Screen shows:

Start Done

The example above is a good Event Loop example. > It demonstrates that there are two separate things: > Updating the DOM > Updating the screen (rendering) > The DOM is updated immediately, but the browser must wait until the current JavaScript task has > finished before repainting.

Want to show "Start" first?

Example

Example Code

javascript

Try it Yourself

function wait() {

  let i = 4e9;

  while (--i > 0);

}

myDisplayer("Start");

setTimeout(function () {

  wait();

  myDisplayer("Done");

}, 0);

The Timeline

Example Code

javascript

Try it Yourself

JavaScript starts

&#8595;

Display "Start"

&#8595;

Current task finishes

&#8595;

Browser repaints

(Start becomes visible)

&#8595;

Event Loop

&#8595;

Run wait()

&#8595;

Display "Done"

&#8595;

Browser repaints

Summary

JavaScript executes one task at a time.
The browser performs asynchronous operations such as timers, downloads, and user events.
Completed operations wait until JavaScript is ready.
The Event Loop starts waiting tasks when the current task has finished.
Promise handlers and await continuations run before timers because they use the Microtask Queue.

JavaScript syntax and algorithm demonstration.

myDisplayer("Start");

wait();

myDisplayer("Done");

Previous: Running Async Tasks in Parallel Next: Asynchronous Fetch API