A must-read for beginners to implement asynchronous methods in js

This time I will bring you a must-see js implementation asynchronous method for novices. What are the precautions that novices must see for js implementation? The following is a practical case, let’s take a look.

One day I suddenly wrote a method to call data from the background and display it on the front page, but the output result was always empty and undefined, and no data was 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 thread, multi-thread, synchronization and asynchronousness

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

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 does everything. I’m a little tired just thinking about it】

2. Multi-threading, as the name suggests, is a program with multiple threads that can be created independently 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.

In this way, it should be better understood, right?

And what are synchronous and asynchronous?

Let us illustrate with a simple life example.

You call a hotel 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 It’s really uncomfortable to wait for the subsequent programs to run out in a hurry).

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

Let's give another 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, and 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:

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 sequential execution was originally thought to be "aaa", "bbb", "ccc", right?

That is to say, when the function executes 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, the data is also empty.

This is the asynchronous mechanism of JS.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS and ajax homology strategy in the project

How to implement track playback in canvas

The above is the detailed content of A must-read for beginners to implement asynchronous methods in js. For more information, please follow other related articles on the PHP Chinese website!