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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
关于Js中new操作符的作用详解
Feb 21 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP闭包实例解析
2014/09/08 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
ext jquery 简单比较
2010/04/07 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python中安装django模块的方法
2020/03/12 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
我们的节日清明节活动方案
2014/03/05 职场文书
社区维稳工作方案
2014/06/06 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
美容院员工规章制度
2015/08/05 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android