Understanding Asynchronous JavaScript: examples and concepts

JavaScript itself is a synchronous language, meaning it executes code in a single thread, one statement at a time.

However, JavaScript can interact with asynchronous APIs provided by the browser, including those in the BOM(Browser Object Model) and DOM (Document Object Model), to handle asynchronous operations.

The BOM does include certain asynchronous methods or functionalities that allow developers to work with asynchronous tasks. For example:

setTimeout() and setInterval(): These methods allow you to schedule the execution of a function or code snippet after a specified delay or at regular intervals, respectively. They are asynchronous because they don't block the execution of other code while waiting for the specified time to elapse.

setTimeout() executes a function(block of code) after some duration. It takes 2 arguments, one is callback function and other is delay or duration in milliseconds.
Its syntax : 

 // Syntax
setTimeout(callbackFunction, delay);


And one example also shown in which callback function gets executer after one second or 1000 milliseconds. 

 // Example : Execute this callback after a delay of 1 second.
setTimeout(function(){
  console.log("Print this after 1 second");
}, 1000);



setInterval() executes a function(block of code) after regular interval defined by duration. It takes 2 arguments, one is callback function and other is delay or duration in milliseconds.
Its syntax is similar to setTimeout function and is written as below : 

 // Syntax
setInterval(callbackFunction, delay);


And one example also shown in which callback function gets executer after every one second or 1000 milliseconds. 

 // Example : Execute this callback after every 1 second.
setInterval(function(){
  console.log("Print this after every 1 second");
}, 1000);


XMLHttpRequest and fetch(): These APIs are used for making HTTP requests to retrieve data from a server. They work asynchronously, allowing other JavaScript code to continue executing while waiting for the response from the server.
The syntax for fetch() API is below, where "url" is like an exact url like google.com and options is an object which takes parameters such as method(GET/POST/PUT/DELETE), headers and body(in case of POST and PUT request). It is widely used API for making an API request. 

fetch('url', options)
.then(response => response.json())
.then(data => console.log(data));


geolocation.getCurrentPosition(): This method retrieves the device's current geographical location. It uses an asynchronous callback mechanism to provide the location data when available.

These are just a few examples of how the BOM includes asynchronous methods. It's important to note that the BOM's primary purpose is to provide an interface between JavaScript and the browser, offering access to browser-specific functionality and features. Asynchronous methods within the BOM, along with those in the DOM and other APIs, enable JavaScript to handle time-consuming tasks without blocking the main execution thread, enhancing responsiveness in web applications.

JavaScript's asynchronous programming paradigm enables actions to be carried out concurrently and independently without delaying the execution of other processes. When dealing with tasks that could take some time to finish, such as reading from a file or getting data from an API, it is especially helpful.

When using synchronous programming, each task is carried out sequentially, and the program waits for one to finish before going on to the next. Particularly when dealing with time-consuming processes, this may result in blocking and unresponsive behavior.

Callbacks, promises, and async/await syntax are all concepts introduced by asynchronous programming to address this issue. Let's examine each of these ideas in turn in next pages.

PrevNext