A brief analysis of the Callback method in Javascript_javascript skills

What is callback

Copy code The code is as follows:

A callback function is a function called through a function pointer. If you pass a function pointer (address) as a parameter to another function, and when this pointer is used to call the function it points to, we say it is a callback function. The callback function is not called directly by the implementer of the function, but is called by another party when a specific event or condition occurs to respond to the event or condition.

This explanation seemed complicated, so I found a better explanation on Zhihu

Copy code The code is as follows:

You go to a store to buy something, and what you want happens to be out of stock, so you leave your phone number with the clerk. After a few days, the store has stock, and the clerk calls your number, and then you receive a call. Then I went to the store to pick up the goods. In this example, your phone number is called the callback function. When you leave your phone number with the store clerk, it is called the registration callback function. When the store has goods later, it is called the event associated with the callback. When the store clerk calls you, it is called the callback function. When you go to the store to pick up the goods, it is called responding to the callback event. Finished answering.

In Javascript:

Copy code The code is as follows:

Function A is passed as a parameter (function reference) to another function B, and this function B executes function A. Let's just say function A is called a callback function. If there is no name (function expression), it is called an anonymous callback function.
In effect, the function is passed as a parameter.

Javscript Callback

Throw all the complicated explanations above into the trash can~ and see what Callback is

What is Callback

In jQuery, the hide method looks like this

Copy code The code is as follows:

$(selector).hide(speed,callback)

When using,

Copy code The code is as follows:

$('#element').hide(1000, function() {
// callback function
});

We just need to write a simple function in it

Copy code The code is as follows:

$('#element').hide(1000, function() {
console.log('Hide');
});

There is a small note in this: the Callback function is executed after the current animation is 100% complete. Then we can see the real phenomenon. When the element with the id of element is hidden, Hide will be output in the console.

also means:

Callback actually means that after a function is executed, the function currently executed is the so-called callback function.

Callback function

Normally functions are executed in sequence, but Javascript is an event-driven language.

Copy code The code is as follows:

function hello(){
console.log('hello');
}

function world(){
console.log('world');
}

hello();
world();

Therefore, under normal circumstances, they will be executed in order, but when the time to execute the world event is relatively long.

Copy code The code is as follows:

function hello(){
setTimeout( function(){
console.log( 'hello' );
}, 1000 );
}

function world(){
console.log('world');
}

hello();
world();

Then this is not the case at this time. At this time, world will be output, and then hello will be output, so we need callback.

Callback instance

A simple example is as follows

Copy code The code is as follows:

function add_callback(p1, p2 ,callback) {
var my_number = p1 p2;
​ callback(my_number);
}

add_callback(5, 15, function(num){
console.log("call " num);
});

In the example we have an add_callback function that receives three parameters: the first two are the two parameters to be added, and the third parameter is the callback function. When the function is executed, the addition result is returned and 'call 20' is output to the console.