What is JavaScript async

As novice programmers, we often encounter some very simple problems, but we don’t know what’s going on. For example, you want to call data from the background and display it on the front page, but the output result is always empty. undefined, no data is available. What is the reason for this? After searching for information from various sources, I discovered that I had fallen into the "pit" of JS asynchronous. That's right, in this article we mainly share with you what the asynchronous operation of JS is.

We often hear the concepts of single-threaded, multi-threaded, synchronized, and asynchronous, so what exactly are these things?
Then let’s start with the concepts above

Basic understanding of single-threaded, multi-threaded, synchronized, and asynchronous

Each running program (i.e. process) There is at least one thread, called the main thread. The main thread is created when starting the program and is used to execute the main function.

1. A single thread is a thread with only one main thread. The code runs sequentially from top to bottom. The main thread is responsible for executing all the code of the program (UI display and refresh, network requests, local storage, etc.) [One thread It’s a bit tiring to do all the things just thinking about it]

2. Multi-threading, as the name suggests, is a program with multiple threads that can be created by the user. Several processes created by users independently are child threads relative to the main thread. The child thread and the main thread are independent running units, and their respective executions do not affect each other, so they can be executed concurrently.

Do you feel a little dizzy just listening to these dry theories? Coincidentally, I was also dizzy when I first saw it.

In the process of looking for information, I found such a vivid metaphor from others.

For example, single-threading means that you go to the kitchen to cook and cook, and one person runs back and forth; multi-threading means that there are two people, one cooking alone and the other cooking.

That should make it easier to understand, right?

And what are synchronous and asynchronous?

We use a simple life example to illustrate.

You call to book a hotel and ask the staff if there is a room. At this time, the staff needs to check whether there is a room before they can answer you.

Synchronization means not hanging up the phone and waiting until the staff tells you whether there is a room.
Asynchronous means hanging up the phone, you go do other things, such as eating and drinking, and the staff will call you after finding the information.

So here comes our topic

What is the asynchronous operation of JS?

The execution environment of JS is single-threaded. That is to say, when the program is executed sequentially, only one task can be executed at a time. If the program wants to run further, it must wait for the current task to be executed. No matter how long the current task takes to execute (if the subsequent program rushes out, it will be really uncomfortable to wait).

In order to solve the uncomfortable blocking problem of subsequent programs. JavaScript has an asynchronous processing mode, which is actually delayed processing.

Let’s give an example to illustrate.

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

The getUserInfo function is called. It may take a lot of time to retrieve data from the background. This requires renderUserInfo to wait until the data is retrieved before it can run. Fortunately, JS has asynchronous operations. When fetching data, you don't need to wait for renderUserInfo to fetch the data, but execute it directly.

That being said, in what order are these two functions executed? Don't worry, let's debug it:

var getUserInfo = function () {
      console.log('aaa');
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log('bbb');
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log('ccc');
    renderUserInfo(data);

The output of the sequential execution was originally thought to be "aaa", "bbb", "ccc", right?

However, things are not that simple. Let's take a look at the console output:

The output results are not sequential.

That is to say, when the function is executed to getJSON to fetch data, the program does not wait for it to fetch the data before executing the next step. Instead, it skips the data fetching stage and directly executes the output data. Therefore, data is also empty.

This is the asynchronous mechanism of JS.

The above content is a detailed explanation of JavaScript asynchronous, I hope it can help everyone.

Related recommendations:

JS asynchronous method to implement Generator

JS asynchronous loading method

Detailed explanation of js asynchronous file loader

The above is the detailed content of What is JavaScript async. For more information, please follow other related articles on the PHP Chinese website!