Understanding javascript callback functions_basic knowledge

Pass the function as a parameter into another function. This function is the so-called callback function

We often encounter a situation where the A and B layers of a project are completed by different people. The A layer is responsible for the function funA, and the B layer is responsible for funcB. When layer B wants to use data from a certain module, he says to the people at layer A, I need you to provide data that meets certain needs, and you provide me with an interface.

The personnel at level A said: I will provide you with data, and how to display and process it is B’s business.
Of course, layer B cannot provide a data interface for every need. B provides an interface for A to pass through. B gets the data, and then B writes a function to display it.

That is, you need to cooperate with other people, others provide data, and you do not need to pay attention to how others obtain or construct data. You just need to operate on the obtained data. At this time, you need to use the callback function

Therefore, callbacks are essentially a design pattern, and the design principles of jQuery (including other frameworks) follow this pattern.

An example of using callbacks in synchronization (blocking), the purpose is to execute func2 after the execution of func1 code is completed.

Copy code The code is as follows:

var func1=function(callback){
//do something.
(callback && typeof(callback) === "function") && callback();
}

func1(func2);
var func2=function(){
}

Example of asynchronous callback:

Copy code The code is as follows:

$(document).ready(callback);

$.ajax({
​​​ url: "test.html",
context: document.body
}).done(function() {
          $(this).addClass("done");
}).fail(function() {
alert("error");
}).always(function() {
alert("complete");
});

Note that the ajax request is indeed asynchronous, but this request is requested by the browser to open a new thread. When the status of the request changes, if a callback has been set previously, the asynchronous thread will generate a status change event and put it in Waiting for processing in the processing queue of the JavaScript engine. See: http://www.phpv.net/html/1700.html

When will the callback be executed?

The callback function is generally executed last in a synchronous situation, but may not be executed in an asynchronous situation because the event is not triggered or the conditions are not met.

Usage occasions of callback function

Resource loading: execute callback after dynamically loading js files, execute callback after loading iframe, ajax operation callback, execute callback after image loading is completed, AJAX, etc.
DOM events and Node.js events are based on the callback mechanism (Node.js callbacks may have multi-layer callback nesting problems).
The delay time of setTimeout is 0. This hack is often used. The function called by settimeout is actually the embodiment of a callback

Chained calls: When chained, it is easy to implement chained calls in the assignor (setter) method (or in a method that does not return a value itself), but the getter (getter) is relatively difficult to implement. Implement chained calls, because you need the valuer to return the data you need instead of this pointer. If you want to implement a chained method, you can use a callback function to implement it

The function calls of setTimeout and setInterval get their return values. Since both functions are asynchronous, that is, their calling sequence is relatively independent of the main process of the program, there is no way to wait for their return values ​​in the body, and the program will not stop and wait when they are opened. Otherwise, the meaning of setTimeout and setInterval will be lost, so it is meaningless to use return, and callback can only be used. The meaning of callback is to notify the agent function of the result of timer execution for timely processing.

Collect information online and you should understand it. I can sort out an example myself:

Copy code The code is as follows:

function fun(num,callback){
If(num<0) {
alert("Calling layer A function for processing!");
alert("Data cannot be negative, input error!");
}else if(num==0){
alert("Calling layer A function for processing!");
alert("This data item does not exist!");
}else{
alert("Call B layer function processing!");
         callback(1);
}
}
function test(){
var num=document.getElementById("score").value;
Fun(num,function(back){ //Anonymous B layer processing function
alert(":" back);
If(num<2)
alert("The number is 1");
          else if(num<=3)
alert("The number is 2 or 3!");
        else
alert("The number is greater than 3!");
})
}

When the function starts to execute fun, it first runs to determine whether num is a negative number or zero, otherwise it executes the B layer processing function alert(":" back); outputs 1 and determines as <2, <= 3, >3 and other situations.

Experience tips:

It is best to ensure that the callback exists and must be a function reference or function expression:

Copy code The code is as follows:

(callback && typeof(callback) === "function") && callback();

Copy code The code is as follows:

var obj={
init: function(callback){
              //TODO...
If(callback && typeof(callback) === "function") && callback()){
                callback('init...');//Callback
}
}

Finally, why should we use callback functions? The following metaphor is very vivid and interesting.

If you have something to do, you go to the next door dormitory to look for your classmates and find that they are not there. What should you do?

Method 1, go to the next door dormitory every few minutes to see if anyone is there
Method 2, please ask the people who share the same dormitory with him to call you when they see him coming back

The former is polling and the latter is callback.

Then tell me, can I just wait in the next dormitory until my classmates come back?

Yes, it’s just that you could have saved time to do other things, but now you have to waste it waiting. Turn the original non-blocking asynchronous call into a blocking synchronous call.

JavaScript callbacks are used in asynchronous calling scenarios, and the performance of using callbacks is better than polling.