Details about js callback functions and js callback Functions

Details about js callback functions and js callback Functions

Now native apps and Web apps are mainstream. That is to say, various browser-based web App frameworks will become increasingly popular, and JavaScript will become more and more promising. I also decided to gradually move closer from back-end development to front-end development and mobile phone development. Let's get started with the question "js callback function.

When talking about callback functions, many people know what they mean, but they still have some knowledge. I am confused about how to use it. I have not explained in detail what is going on the Internet. Next I will just talk about my personal understanding. Do not spray it. Let's look at a rough definition: "function a has a parameter, which is function B. function B is executed after function a is executed. This process is called callback .", This sentence means that function B passes in function a as a parameter and executes it. The sequence is to first execute a, then execute parameter B, and B is the so-called callback function. Let's take a look at the example below.

Copy codeThe Code is as follows:
Function a (callback ){
Alert ('A ');
Callback. call (this); // or callback (), callback. apply (this), depending on your preferences
}
Function B (){
Alert ('B ');
}
// Call
A (B );

The result is 'A' first and then 'B '. In this case, someone may ask, "What does this code mean? It doesn't seem to have much effect !"

Yes, in fact, I don't think it's interesting to write it like this. "If you call a function, you just need to call it directly in the function ". I am only writing a small example for you to make a preliminary understanding. In most scenarios, we need to pass parameters. To include the following parameters:

Copy codeThe Code is as follows:
Function c (callback ){
Alert ('C ');
Callback. call (this, 'd ');
}
// Call
C (function (e ){
Alert (e );
});

This call seems familiar to me. Here, the e parameter is assigned as 'D'. We simply assign a value to the character escape, but it can also be assigned as an object. Is there an e parameter in Jquery? Let's talk about it now.
How is the e parameter assigned by callback in Jquery.

I think everyone is familiar with the Jquery framework. It has been around for a long time and is used during development. It is relatively simple. It is very convenient to search the api online. Under the Jquery framework, we sometimes need to obtain some parameters in the event, such as the coordinates of the current click and the element object to be clicked. This requirement can be easily implemented in Jquery:

Copy codeThe Code is as follows:
$ ("# Id"). bind ('click', function (e ){
// E. pageX, e. pageY, e.tar get... various data
});

It is quite convenient to use. In fact, the value assignment of this e parameter is also implemented through the callback function. This parameter is assigned an object value by the callback parameter, A friend who has carefully studied the JJquery source code should have discovered this.

In addition, the $. get ('', {}, function (data) {}) data parameter in Ajax works in the same way.

Let's take a look at how the callback function is applied in the Jquery event object.

For convenience, I simply wrote some implementations related to $. Previously I wrote "small talk about Jquery", which has a method that is closer to the implementation of the Framework. Below I just wrote a simple selector.

Copy codeThe Code is as follows:
<Div id = "container" style = "width: 200px; height: 200px; background-Color: green;">
</Div>
<Script>
Var _ $ = function (id)
{
This. element = document. getElementById (id );
}
_ $. Prototype = {
Bind: function (evt, callback)
{
Var that = this;
If (document. addEventListener)
{
This. element. addEventListener (evt, function (e ){
Callback. call (this, that. standadize (e ));
}, False );
}
Else if (document. attachEvent)
{
This. element. attachEvent ('on' + evt, function (e ){
Callback. call (this, that. standadize (e ));
});
}
Else
This. element ['on' + evt] = function (e ){
Callback. call (this, that. standadize (e ));
};
},
Standadize: function (e ){
Var evt = e | window. event;
Var pageX, pageY, layerX, layerY;
// PageX y coordinate pageY y coordinate layerX click is located at the Y coordinate of the element layerY click is located at the Y coordinate of the element
If (evt. pageX)
{
PageX = evt. pageX;
PageY = evt. pageY;
}
Else
{
PageX = document. body. scrollLeft + evt. clientX-document.body.clientLeft;
PageY = document. body. scrollTop + evt. clientY-document.body.clientLTop;
}
If (evt. layerX)
{
LayerX = evt. layerX;
LayerY = evt. layerY;
}
Else
{
LayerX = evt. offsetX;
LayerXY = evt. offsetY;
}
Return {
PageX: pageX,
PageY: pageY,
LayerX: layerX,
LayerY: layerY
}
}
}
Window. $ = function (id)
{
Return new _ $ (id );
}
$ ('Container'). bind ('click', function (e ){
Alert (e. pageX );
});
$ ('Container1'). bind ('click', function (e ){
Alert (e. pageX );
});
</Script>

In this Code, we mainly look at the implementation of the standadize function. The compatibility code will not be much said, and an object will be returned.

Copy codeThe Code is as follows:
Return {
PageX: pageX,
PageY: pageY,
LayerX: layerX,
LayerY: layerY
}

Then let's look at the code callback. call (this, that. standadize (e) in the bind function. this code is actually assigned a value to the e parameter, which is implemented using the callback.

When the callback function is called, an anonymous function is input.

Copy codeThe Code is as follows:
Function (e ){
}

While callback. call (this, that. standadize (e) is equivalent to executing such a piece of code

Copy codeThe Code is as follows:
(Function (e ){
}) (Standadize (e ))

This is also a classic part of Jquery's use of callback functions. The e parameter is assigned so much. You may have some knowledge about it and how to use it.

Callbacks are widely used in various frameworks. Sometimes you can use callbacks based on your actual situation when writing something.