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