jQuery回调函数
1.引言
利用回调函数来当参数，会极大的提高程序的灵活性。对回调函数很陌生，研究了一下给的示例程序，感觉对回调函数有了基本的理解，记录下来，以备后用。
2.定义
回调函数就是一个通过函数指针调用的函数。假如你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或者条件发生时由另外的一方调用的，才会真正的执行回调函数内部的方法。
3.代码
JS代码
1 (function($){ 2 $.fn.shadow = function(opts){ 3 //定义的默认的参数 4 var defaults = { 5 copies: 5, 6 opacity:0.1, 7 //回调函数 8 copyOffset:function(index){ 9 return{x:index,y:index};10 }11 };12 //将opts的内容合并到default中。13 var options = $.extend(defaults,opts);14 return this.each(function(){15 var $originalElement = $(this);16 //设置参数对象17 for(var i=0;i<options.copies;i++)18 {19 var offset = options.copyOffset(i);20 $originalElement21 .clone()22 .css({23 position:'absolute',24 left:$originalElement.offset().left + offset.x,25 top:$originalElement.offset().top + offset.y,26 margin:0,27 zIndex:-1,28 //设置参数对象29 opacity:options.opacity30 })31 .appendTo('body');32 }33 });34 };35 })(jQuery);36 $(document).ready(function(){37 $('h1').shadow({38 copies:5,39 copyOffset:function(index){40 return {x:-index,y:-2 * index};41 }42 });43 });4.分析
通过这段代码调试的时候进入的顺序，便可了解回调函数的机制。通过对黄背景的四段代码加入断点。程序将会以以下的顺序运行
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行的回调函数的方法。
5.总结
从上面的分析可以看出，回调函数在参数中公告时，相当于只是公告了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。
6.附html代码
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Developing Plugins</title> 7 8 <link rel="stylesheet" href="08.css" type="text/css" /> 9 <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />10 11 <script src="jquery.js"></script>12 <script src="jquery-ui-1.10.0.custom.min.js"></script>13 <script src="08.js"></script>14 </head>15 <body>16 <div id="container">17 <h1>Inventory</h1>18 <table id="inventory">19 <thead>20 <tr class="two">21 <th>Product</th>22 <th>Quantity</th>23 <th>Price</th>24 </tr>25 </thead>26 <tfoot>27 <tr class="two" id="sum">28 <td>Total</td>29 <td></td>30 <td></td>31 </tr>32 <tr id="average">33 <td>Average</td>34 <td></td>35 <td></td>36 </tr>37 </tfoot>38 <tbody>39 <tr>40 <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>41 <td>4</td>42 <td>2.50</td>43 </tr>44 <tr>45 <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>46 <td>12</td>47 <td>4.32</td>48 </tr>49 <tr>50 <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>51 <td>14</td>52 <td>7.89</td>53 </tr>54 </tbody>55 </table>56 </div>57 </body>58 </html></pre>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jQuery回调函数
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jQuery回调函数
