jQuery学习笔记之回调函数

时间：2021-05-26

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学习笔记之回调函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章