关于javascript:jQuery回调函数

利用回调函数来当参数，会极大的进步程序的灵活性。对回调函数很生疏，钻研了一下给的示例程序，感觉对回调函数有了根本的理解，记录下来，以备后用。

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，咱们就说这是回调函数。回调函数不是由该函数的实现方间接调用，而是在特定的事件或条件产生时由另外的一方调用的，才会真正的执行回调函数外部的办法。

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                 $originalElement
21                 .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.opacity
30                 })
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 });

通过这段代码调试的时候进入的程序，便可了解回调函数的机制。通过对黄背景的四段代码退出断点。程序将会以以下的程序运行

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 行的回调函数的办法。

从下面的剖析能够看出，回调函数在参数中申明时，相当于只是申明了一个委托。等到用到这个参数的时候才会真正的执行回调函数外面的内容。

 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>

关于javascript:jQuery回调函数

1. 引言

2. 定义

3. 代码

4. 剖析

5. 总结

6. 附 html 代码