Synchronous vs Asynchronous Code
AI Using GitHub Copilot in VS Code
In previous weeks you've learned about control flow. In short: it's the order in which the computer executes statements in a script. In JavaScript, code is executed from top to bottom and from left to right within each line.
Let's look at code execution from another angle. The program that executes your code can do it in two basic ways: synchronous or asynchronous. Whenever code is executed line after line (from top to bottom), we call this synchronous execution. However, when some parts of the program can continue running without waiting for a slow operation to finish, we call this asynchronous execution.
For instance, after firing off an HTTP request from a JavaScript application in the browser, the JavaScript engine can keep doing other things, like responding to mouse clicks and updating the UI. When, some time later, the HTTP response is received, the application can pick it up and process it.
It is important to keep in mind that a computer’s CPU can perform operations much faster (measured in nanoseconds: $10^{-9}$ seconds) than computer networks or other I/O operations (usually milliseconds: $10^{-3}$ seconds). So, when a network or I/O operation is underway, it would be wasteful and unneeded to wait for the operation to complete before doing anything else. An application that waits like this will feel unresponsive. Developers say that the application blocks while waiting for the I/O operation to complete. Blocking code is something you want to avoid.
The next two videos show the difference between asynchronous (non‑blocking) code and synchronous (blocking) code. They use a simple countdown timer application running in the browser that can run in non‑blocking mode or in blocking mode. When the Start button is pressed, it counts down from ten to zero, while updating the page. It also speaks aloud and logs the current count to the console.
The first video shows the non‑blocking version. The counter updates on the page, the Start button behaves normally, and the app remains responsive to user interaction.
The second video shows the blocking version. In this version you can immediately observe the following UI issues:
However, the console still shows the count being decremented, which means the JavaScript code is still counting down. When the count reaches zero the Start button is no longer shown as depressed. There will be a catching up of the backlog of missing spoken counts (9–0). Not shown in this video is that pressing the Stop button will also not work during the countdown.
<aside> ⚠️
Blocking code makes the web page unresponsive and leads to a poor user experience. Always write non‑blocking, asynchronous code to keep your web apps smooth and interactive.
</aside>
<aside> ⌨️
Hands on: The code for this example can be found in the Learning-Resources repository on GitHub: https://github.com/HackYourFuture/Learning-Resources/tree/main/core-program/week-10/countdown
</aside>
Found a mistake or have a suggestion? Let us know in the feedback form.