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获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 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
基于mysql的论坛(6)
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
javascript实现计算器功能
2020/03/30 Javascript
django加载本地html的方法
2018/05/27 Python
详解python分布式进程
2018/10/08 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Keras设置以及获取权重的实现
2020/06/19 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
客服文员岗位职责
2013/11/29 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
高三英语教学反思
2014/01/13 职场文书
集团薪酬管理制度
2014/01/13 职场文书
社区工作者感言
2014/03/02 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
学习张林森心得体会
2014/09/10 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书