Asynchronous JS callback

Although I have seen some articles about callback in the past, it is a little hard to understand. At that time, there was a concept in my mind.

Preface

Although I have seen some articles about callback in the past, it is a little hard to understand. At that time, there was a concept in my mind.

Callback: mostly occurs in Ajax requests, which are used to process the results of received requests.

Hey, that was the idea. Now, this is a very important concept. There are too many places to use. It is time to pick it up and understand it.

Of course, this article is suitable for cainiao, because I understand it with a cainiao mind.

Callback Concept

To understand a new thing, we must understand its concept, because it is concise and clear and summarized by our predecessors.

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

A callback is a function that is passed to another function as a parameter and executed after the function is executed.
It's a bit difficult. Let's talk about it. Function B is passed to function A as A parameter. function B is executed after function A is executed.

Next let's take a look at how the code implements callback.

Function A (callback) {console. log ("I am A"); callback (); // call this function} function B () {console. log ("I am B");} A (B );

This should be the simplest callback. I think you should understand the meaning of callback. Of course, such a simple synchronous callback code will not be used. In reality, it is relatively complicated to use with passing parameters.

Callback functions and Asynchronization

At first, I was a little confused by the callback and Asynchronization. I thought the callback must be asynchronous.
Otherwise, we believe that the example of the above A and B functions already understands that callback is not necessarily asynchronous. They are not directly related to themselves.

Next we can understand synchronous callback and asynchronous callback (I will not talk about Synchronous asynchronous, the concept is very simple ).

Synchronous callback

In the example of the above a B function, they are synchronous callbacks.

Asynchronous callback

Because js is single-threaded, the execution steps (ajax requests remote data, IO, etc.) in many cases are very time-consuming, if a single thread is blocked, the page will lose response after the program waits for a long time, affecting the user experience.

How can we solve this problem. We threw all the time-consuming data to the asynchronous mode. After the time-consuming data was completed, we were notified to continue with the data.

Var xhr = new XMLHttpRequest (); xhr. open ('post', url, true); // The third parameter determines whether xhr is used asynchronously. send (data); xhr. onreadystatechange = function () {if (xhr. readystate === 4 & xhr. status = 200) {// xxxx }}

The above is an ajax code. When a browser initiates an ajax request, it will open a single thread to initiate an http request. In this way, the time-consuming process can be run independently, in the request process of this thread, the value of readystate changes. Each change triggers the onreadystatechange function to determine whether the returned result is obtained correctly.