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 相关文章推荐
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
js实现弹窗效果
Aug 09 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
php调用C代码的实现方法
2014/03/11 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
JavaScript面向对象编程
2008/03/02 Javascript
很可爱的输入框
2008/08/03 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python中enumerate函数代码解析
2017/10/31 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
幼儿园数学教学反思
2014/02/02 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Django项目如何正确配置日志(logging)
2021/04/29 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL