jQuery学习笔记之回调函数


Posted in Javascript onAugust 15, 2016

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="jquery.js"></script>
<script src="jquery-ui-1.10.0.custom.min.js"></script>
<script src="08.js"></script>
</head>
<body>
<div id="container">
<h1>Inventory</h1>
<table id="inventory">
<thead>
<tr class="two">
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr class="two" id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
<td>14</td>
<td>7.89</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

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

Javascript 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
纯css下拉菜单 无需js
Aug 15 #Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 #Javascript
js轮盘抽奖实例分析
Apr 17 #Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 #Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 #Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
又一款js时钟!transform实现时钟效果
Aug 15 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP4实际应用经验篇(2)
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php 中文处理函数集合
2008/08/27 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python中的__slots__示例详解
2017/07/06 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python中实现栈的三种方法
2020/12/19 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
秘书岗位职责
2013/11/18 职场文书
远程教育心得体会
2014/01/03 职场文书
高三高考决心书
2014/03/11 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
怎样写辞职信
2015/02/27 职场文书
导游词之镇江焦山
2019/11/21 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技