The callback function of jquery learning notes _jquery

1. callback function definition

A callback function is a function called by a function pointer. If you pass a function's pointer (address) as an argument to another function, when the pointer is used to call the function it points to, we say this is a callback function. A callback function is not invoked directly by the implementing party of the function, but is invoked by another party when a particular event or condition occurs, and the method inside the callback function is actually executed.

2. Code

JS Code

(function ($) {
$.fn.shadow = function (opts) {
//defined default parameter
var defaults = {
Copies:5,
opacity:0.1,
//callback function
copyoffset:function (index) {
return{x:index,y:index};
}
;
Merges the contents of the OPTs into default.
var options = $.extend (defaults,opts);
Return This.each (function () {
var $originalElement = $ (this);
Sets the Parameter object for
(Var i=0;i<options.copies;i++)
{
var offset = options.copyoffset (i);
$originalElement
. Clone ()
. css ({
position: ' absolute ', left
: $originalElement. Offset (). Left + Offset.x, top
: $originalElement. Offset (). Top + Offset.y,
margin:0,
zindex:-1,
//Set Parameter object
Opacity:options.opacity
})
. Appendto (' body ');})
;
}
(jQuery);
$ (document). Ready (function () {
$ (' H1 '). Shadow ({
copies:5,
copyoffset:function (index) {
return {x:-index,y:-2 * index};});

3. Analysis

The mechanism of the callback function can be understood by the order in which the code is debugged. Add a breakpoint by adding four pieces of code to the yellow background. The program will run in the following order

39: Run the 39th line first, when the DOM is loaded and run after the Shadow (), run 39 lines will not run 40 straight lines. Instead, it is transferred directly to the definition of the shadow () function. Here just declares the Copyoffset function pointer.

2: This time to view the contents of opts object {copies=5, Copyoffset=function ()} From here you can see that copyoffset is just a function (),

8: Start to walk the default parameter of the Copyoffset, and 39 lines, not directly into the callback function inside the content.

19: When you get here, you need to make a request to copyoffset and pass in I as an argument. At this point I is the parameter index of the callback function.

40: Because of the 13 line "var options = $." Extend (defauflts,opts) ". The OPTs attribute overrides the default property, so it does not take the callback function in the default parameter of 9 lines, but instead the method of the callback function in line 40th.

4. Summary

As you can see from the analysis above, the callback function, when declared in a parameter, is tantamount to declaring only a delegate. The contents of the callback function are not actually executed until the parameter is used.

5. Attached HTML code

<! DOCTYPE html>  

The above is a small set to introduce the jquery learning notes of the callback function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!