About JavaScript Async (Detailed Tutorial)

JavaScript asynchronous written for beginners, has certain reference value, interested friends can refer to it

One day, I suddenly wrote a method to call data from the background and display it on the front page , but the output result is always empty and undefined, and no data can be obtained. After searching for information from various sources, I discovered that I had fallen into the "pit" of JS asynchronous.

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

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

Each running program ( A process) has 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 independently by users 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);

I thought the output of sequential execution was "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 stage of fetching data and directly executes the output data. Therefore, data Also empty.

This is the asynchronous mechanism of JS.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use JavaScript to achieve the left menu effect

How to achieve the select-all-cancel effect in JavaScript

How to call vuex to store interface data in vue.js

The above is the detailed content of About JavaScript Async (Detailed Tutorial). For more information, please follow other related articles on the PHP Chinese website!