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學習筆記之回調函數，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家的支持！