1.回调函数定义

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法。

2.代码

JS代码

(function($){
$.fn.shadow = function(opts){
//定义的默认的参数
var defaults = {
copies: 5,
opacity:0.1,
//回调函数
copyOffset:function(index){
return{x:index,y:index};
}
};
//将opts的内容合并到default中。
var options = $.extend(defaults,opts);
return this.each(function(){
var $originalElement = $(this);
//设置参数对象
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,
//设置参数对象
opacity:options.opacity
})
.appendTo('body');
}
});
};
})(jQuery);
$(document).ready(function(){
$('h1').shadow({
copies:5,
copyOffset:function(index){
return {x:-index,y:-2 * index};
}
});
});

3.分析

通过这段代码调试的时候进入的顺序,便可理解回调函数的机制。通过对黄背景的四段代码加入断点。程序将会以以下的顺序运行

39:先跑第39行,当DOM加载完毕后运行了shadow(),跑完39行并不会直接跑40行。而是直接调到了shadow()函数定义的地方。在这里只是声明了copyOffset的函数指针。

2:这时候查看opts里面的内容Object { copies=5, copyOffset=function()}从这里可以看出来copyOffset只是一个function(),

8:开始走默认参数的copyOffset,与39行一样,不会直接进入回调函数里面的内容。

19:走到这里时,需要将对CopyOffset发出请求并传入了i作为参数。这时候i就是回调函数的参数index。

40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的属性会覆盖掉default的属性,所以不会走9行默认的参数中的回调函数的执行方法,而是走了第40行的回调函数的方法。

4.总结

从上面的分析可以看出,回调函数在参数中声明时,相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。

5.附html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>
<link rel="stylesheet" href="08.css" type="text/css" />
<link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
<script src="/UploadFiles/2021-04-02/jquery.js">

以上所述是小编给大家介绍的jQuery学习笔记之回调函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
jquery,回调函数

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery学习笔记之回调函数”

暂无“jQuery学习笔记之回调函数”评论...