jQuery学习笔记之回调函数
1.回调函数定义
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，才会真正的执行回调函数内部的方法。
2.代码
JS代码
(function($){
$.fn.shadow=function(opts){
//定义的默认的参数
vardefaults={
copies:5,
opacity:0.1,
//回调函数
copyOffset:function(index){
return{x:index,y:index};
}
};
//将opts的内容合并到default中。
varoptions=$.extend(defaults,opts);
returnthis.each(function(){
var$originalElement=$(this);
//设置参数对象
for(vari=0;i<options.copies;i++)
{
varoffset=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行的”varoptions=$.Extend(defauflts,opts)”。opts的属性会覆盖掉default的属性，所以不会走9行默认的参数中的回调函数的执行方法，而是走了第40行的回调函数的方法。
4.总结
从上面的分析可以看出，回调函数在参数中声明时，相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。
5.附html代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <title>DevelopingPlugins</title> <linkrel="stylesheet"href="08.css"type="text/css"/> <linkrel="stylesheet"href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css"type="text/css"/> <scriptsrc="jquery.js"></script> <scriptsrc="jquery-ui-1.10.0.custom.min.js"></script> <scriptsrc="08.js"></script> </head> <body> <divid="container"> <h1>Inventory</h1> <tableid="inventory"> <thead> <trclass="two"> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tfoot> <trclass="two"id="sum"> <td>Total</td> <td></td> <td></td> </tr> <trid="average"> <td>Average</td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td><ahref="spam.html"data-tooltip-text="Nutritiousanddelicious!">Spam</a></td> <td>4</td> <td>2.50</td> </tr> <tr> <td><ahref="egg.html"data-tooltip-text="Farmfreshorscrambled!">Egg</a></td> <td>12</td> <td>4.32</td> </tr> <tr> <td><ahref="gourmet-spam.html"data-tooltip-text="ChefHermann'srecipe.">GourmetSpam</a></td> <td>14</td> <td>7.89</td> </tr> </tbody> </table> </div> </body> </html>
以上所述是小编给大家介绍的jQuery学习笔记之回调函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！