Nowadays, native apps and web apps are the mainstream, which means that various browser-based web app frameworks are becoming more and more popular, and those who do JS are becoming more and more promising. I also decided to gradually move from back-end development to front-end development and mobile development. Let's not talk nonsense, let's get to the topic of "js callback function".
Speaking of callback functions, although many people know the meaning, they still have only a few understandings. As for how to use it, it's still a bit confused. Some related things on the Internet have not explained in detail what happened, and they are more one-sided. Next, I will just talk about my personal understanding, don’t criticize me. Let's take a look at a rough definition "Function a has a parameter, and this parameter is a function b. When function a is executed, function b is executed. Then this process is called a callback." This sentence means that function b is passed into function a in the form of a parameter and executed in the order of executing a first, and then executing parameters b, b is the so-called callback function. Let’s first look at the following example.
The code copy is as follows:
function a(callback){
alert('a');
callback.call(this);//or callback(), callback.apply(this), depending on personal preference
}
function b(){
alert('b');
}
//Call
a(b);
The result is that 'a' pops up first and 'b' pops up. In this way, someone might ask, "What's the point of writing such code? It doesn't seem to be of much use!"
Yes, I actually think it's meaningless to write like this, "If you call a function, just call it directly in the function." I'm just writing a small example for you to give you a preliminary understanding. This kind of parameterless one is rarely used in the process of actually writing code, because in most scenarios, we have to pass parameters. Here is a parameter:
The code copy is as follows:
function c(callback){
alert('c');
callback.call(this,'d');
}
//Call
c(function(e){
alert(e);
});
Does this call look familiar? Here the e parameter is assigned to 'd'. We just simply assign the value to character squirts, but in fact we can also assign the value to objects. Is there an e parameter in Jquery? Let's talk about it below
How is the e parameter in Jquery assigned by a callback?
I think everyone is familiar with the Jquery framework. It has been released for a long time and is used during development. It is relatively simple. It is very convenient to search the API online and it is easy to get started. Under the Jquery framework, we sometimes need to get some parameters in the event, such as the coordinates of the current click and the element object of the click. This requirement is easy to deal with in Jquery:
The code copy is as follows:
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target......various data
});
It is quite convenient to use. In fact, the assignment of this e parameter is also achieved through the callback function. This parameter is assigned an object value to it using the callback parameter. Friends who have carefully studied the JJquery source code should have discovered this.
There is also the same principle in Ajax's $.get('',{},function(data){}) data parameter.
Let's take a look at how the callback function is applied in the Jquery event object.
For convenience, I simply wrote about some implementations related to $. I have written before that "Xiaotan Jquery" has a relatively close method to the framework implementation. I am just writing a simple selector below.
The code copy is as follows:
<div id="container">
</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 horizontal coordinate pageY vertical coordinate layerX click is located at the horizontal coordinate layerY click is located at the vertical 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>
We mainly look at the implementation of the standadize function. I won’t say much about this code, the return object is
The code copy is as follows:
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
Then 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 a callback callback.
The anonymous function is passed in when the callback function is called
The code copy is as follows:
function(e){
}
callback.call(this, that.standadize(e)) is equivalent to executing such a piece of code
The code copy is as follows:
(function(e){
})(standadize(e))
This is also the classic thing about Jquery using callback functions. This is how the e parameter is assigned. After saying this, you probably have a good understanding of this and how to use it.
Callbacks are used more frequently in various frameworks. Sometimes when writing something by yourself, you can also use it according to the actual situation.