快捷導(dǎo)航

jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)

更新時(shí)間：2016年08月15日 09:27:26 作者：帆帆帆

回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù).這篇文章主要介紹了jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1.回調(diào)函數(shù)定義

回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用來(lái)調(diào)用其所指向的函數(shù)時(shí)，我們就說(shuō)這是回調(diào)函數(shù)?；卣{(diào)函數(shù)不是由該函數(shù)的實(shí)現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時(shí)由另外的一方調(diào)用的，才會(huì)真正的執(zhí)行回調(diào)函數(shù)內(nèi)部的方法。

2.代碼

JS代碼

(function($){
$.fn.shadow = function(opts){
//定義的默認(rèn)的參數(shù)
var defaults = {
copies: 5,
opacity:0.1,
//回調(diào)函數(shù)
copyOffset:function(index){
return{x:index,y:index};
}
};
//將opts的內(nèi)容合并到default中。
var options = $.extend(defaults,opts);
return this.each(function(){
var $originalElement = $(this);
//設(shè)置參數(shù)對(duì)象
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,
//設(shè)置參數(shù)對(duì)象
opacity:options.opacity
})
.appendTo('body');
}
});
};
})(jQuery);
$(document).ready(function(){
$('h1').shadow({
copies:5,
copyOffset:function(index){
return {x:-index,y:-2 * index};
}
});
});

3.分析

通過(guò)這段代碼調(diào)試的時(shí)候進(jìn)入的順序，便可理解回調(diào)函數(shù)的機(jī)制。通過(guò)對(duì)黃背景的四段代碼加入斷點(diǎn)。程序?qū)?huì)以以下的順序運(yùn)行

39：先跑第39行，當(dāng)DOM加載完畢后運(yùn)行了shadow()，跑完39行并不會(huì)直接跑40行。而是直接調(diào)到了shadow()函數(shù)定義的地方。在這里只是聲明了copyOffset的函數(shù)指針。

2:這時(shí)候查看opts里面的內(nèi)容Object { copies=5, copyOffset=function()}從這里可以看出來(lái)copyOffset只是一個(gè)function()，

8:開始走默認(rèn)參數(shù)的copyOffset，與39行一樣，不會(huì)直接進(jìn)入回調(diào)函數(shù)里面的內(nèi)容。

19：走到這里時(shí)，需要將對(duì)CopyOffset發(fā)出請(qǐng)求并傳入了i作為參數(shù)。這時(shí)候i就是回調(diào)函數(shù)的參數(shù)index。

40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的屬性會(huì)覆蓋掉default的屬性，所以不會(huì)走9行默認(rèn)的參數(shù)中的回調(diào)函數(shù)的執(zhí)行方法，而是走了第40行的回調(diào)函數(shù)的方法。

4.總結(jié)

從上面的分析可以看出，回調(diào)函數(shù)在參數(shù)中聲明時(shí)，相當(dāng)于只是聲明了一個(gè)委托。等到用到這個(gè)參數(shù)的時(shí)候才會(huì)真正的執(zhí)行回調(diào)函數(shù)里面的內(nèi)容。

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學(xué)習(xí)筆記之回調(diào)函數(shù)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: