jQuery源碼分析之Callbacks詳解
代碼的本質(zhì)突出順序、有序這一概念，尤其在javascript——畢竟javascript是單線程引擎。
javascript擁有函數(shù)式編程的特性，而又因為javascript單線程引擎，我們的函數(shù)總是需要有序的執(zhí)行。優(yōu)秀代碼常常 把函數(shù)切割成各自的模塊，然后在某一特定條件下執(zhí)行，既然這些函數(shù)是有序的執(zhí)行，那么我們?yōu)槭裁床痪帉懸粋€統(tǒng)一管理的對象，來幫助我們管理這些函數(shù)——于是，Callbacks（回調(diào)函數(shù)）誕生。
什么是Callbacks
javascript中充斥著函數(shù)編程，例如最簡單的window.onload承接的就是一個函數(shù)，悲催的是window.onload直接賦值的話只能接收一個函數(shù)，如果有好幾個函數(shù)想要在onload中執(zhí)行，那么我們就需要編寫如下代碼：
function a(elem) {
elem.innerHTML = '我是函數(shù)a，我要改變Element的HTML結(jié)構(gòu)';
};
function b(elem) {
elem.innerHTML = '我的函數(shù)b，我要改變Element的style';
}
window.onload = function () {
var elem = document.getElementById('test');
a(elem);
b(elem);
};
回調(diào)函數(shù)初衷就是建立在這么個玩意兒的上面，不再讓我們分散這些函數(shù)，而是把這些函數(shù)統(tǒng)一整理?？梢钥匆姡覀冊趙indow.onload中希望針對一個Element做兩件事情：先改變html結(jié)構(gòu)，然后改變這個html的style。兩個函數(shù)同樣是針對一個Element操作，而這兩個函數(shù)最終的執(zhí)行都是有序進行的。那么我們?yōu)槭裁床痪帉懸粋€這樣的對象管理這些函數(shù)呢。當然， 這只是回調(diào)函數(shù)的最基礎(chǔ)的存在意義，我們需要的不僅僅是這樣一個簡單的回調(diào)函數(shù)對象，我們需要一個更加強大的回調(diào)函數(shù)。好吧，這只是一個簡單的用例，那么我可以告訴你這個回調(diào)函數(shù)除了一個個執(zhí)行函數(shù)之外，它還可以做什么。
Callbacks本質(zhì)就是控制函數(shù)有序的執(zhí)行，Javascript是單線程引擎，也就說，javascript同一時間只會有一處代碼在運行——即便是Ajax、setTimeout。 這兩個函數(shù)看起來好像都是異步的，其實并非如此，瀏覽器在運行javascript代碼的時候，這些代碼都會被有序的壓入一個隊列中，當你運行Ajax的時候，瀏覽器會把Ajax 壓入代碼隊列，瀏覽器在處理javascript代碼是從這個代碼隊列中一個一個取代碼執(zhí)行的——Callbacks，迎合了這種單線程引擎。
當然，我們要的，不僅僅是這樣一個簡單的工具對象——在jQuery源碼中，Callbacks提供了一組函數(shù)的基本管理，為Deferred（異步隊列）提供了基礎(chǔ)，同時也服務(wù)于Queue（同步隊列）。 Deferred用于抹平/扁平化金字塔編程（大量的回調(diào)函數(shù)嵌套，例如Ajax中需要根據(jù)請求返回碼決定執(zhí)行的代碼）； 而Queue，驅(qū)動著jQuery.animate（動畫引擎）。
那么我們就來編寫一個Callbacks吧。
Callbacks模型
Array（數(shù)組）：
既然我們Callbacks要承接一系列函數(shù)，那么必然需要有一個容器。我們可以使用一個數(shù)組，并把每一個函數(shù)壓到該數(shù)組中，需要執(zhí)行的時候，循環(huán)數(shù)組項執(zhí)行。
工作模型：
這個Callbacks需要非常的強大，并不僅僅是壓入函數(shù)，然后執(zhí)行這么簡單，這個Callbacks應(yīng)該擁有良好的執(zhí)行模型。
once：當前Callbacks對象中所有的函數(shù)只會執(zhí)行一次，執(zhí)行一次完之后就會被釋放掉，我們可以為使用Callbacks對象的用戶提供一個穩(wěn)定有效的方案，確保函數(shù)只會執(zhí)行一次，之后不再執(zhí)行，穩(wěn)定了這些函數(shù)的線程。
auto：自動執(zhí)行模型，這是個有意思的模型，有些函數(shù)依賴上一層函數(shù)，例如函數(shù)b的執(zhí)行依賴于函數(shù)a，那么我們提供一個自動執(zhí)行的模型：第一次執(zhí)行這個Callbacks之后，每次添加函數(shù)到Callbacks的時候，自動執(zhí)行過去添加的那些函數(shù)，并把最后一次給定的參數(shù)數(shù)據(jù)傳遞給過去的那些函數(shù)，這樣就從Callbacks中抹平了這些依賴函數(shù)之間需要反復(fù)觸發(fā)的關(guān)系，這是個有意思的模型。
once&auto：我們可以讓它更強大，同時工作once和auto模型，即：當每次添加函數(shù)到Callbacks中的時候，過去的函數(shù)都會執(zhí)行，然后，釋放掉這些過去的函數(shù)，下次繼續(xù)添加函數(shù)的時候，過去的那些函數(shù)不會再執(zhí)行，因為once模型，已經(jīng)把它們釋放掉了。
API：
add(function) - 添加一個（或多個）函數(shù)到Callbacks對象中：當然，如果你并不添加函數(shù)只是好奇看看Callbacks，我們也將讓你繼續(xù)享受你的樂趣——我們并不會拋出異常，因為這對于我們來說并不擅長。
remove(function) - 移除一個Callbacks中的一個函數(shù)：既然有了添加，那么我們也應(yīng)該提供反悔的方案，我們是多么的平易近人，容忍著別人過去所做的一切。
has(function) - 判斷Callbacks中是否包含一個函數(shù)：哦？你竟然不確定是否包含這個函數(shù)，當初可是你丟進來的啊！你怎么如此馬虎？不過既然你問我的話，我仍然會告訴你Callbacks是否包含這個函數(shù)，我知道你很繁忙，并不能記住和確定所有的事情。
empty() - 清空Callbacks：這些函數(shù)對于你失去了意義了么？什么？已經(jīng)執(zhí)行過你就不想要了？所以你希望可以清空它？好吧，為了內(nèi)存君我還是忍下你這個需求。
disable() - 廢掉一個Callbacks：為了和別人的代碼穩(wěn)定的存在，我選擇了自我犧牲——沒錯，這個方法可以廢掉Callbacks，徹底的廢掉，就如同它曾經(jīng)尚未存在過一般。
disabled() - 判斷這個Callbacks是否已經(jīng)被廢掉：如果你仍然不相信Callbacks是否真的自我犧牲，那么這個方法可以讓你安心。
lock(boolean) - 鎖定這個Callbacks對象：你害怕它并不穩(wěn)定，但是你又不想舍棄它，lock是個不錯的方法，它接收一個Boolean的參數(shù)，表示是否需要鎖定這個對象，當然，無參的它用于讓你確定Callbacks是否被鎖定。
fire(data) - 執(zhí)行這個Callbacks中的函數(shù)：我們做的這一切，不都是為了這一刻執(zhí)行的宿命么？參數(shù)將會成為這些需要執(zhí)行的函數(shù)的參數(shù)。
fireWith(context,data) - 執(zhí)行Callbacks中的函數(shù)，并且指定上下文。在fire()里，所有的函數(shù)的Context(上下文)都是Callbacks對象，而fireWidth()，可以讓你重新定義這些要執(zhí)行的函數(shù)的上下文，多么自由的編程啊，Callbacks為你考慮了一切。
fired() - 判斷這個Callbacks過去是否已經(jīng)執(zhí)行過：我們相信，多數(shù)時候你并不知道過去做過什么，但是我們記錄了你做的一切，如果你過去曾經(jīng)執(zhí)行過這個Callbacks對象，那么你休想否認，因為我們知道過去你是否執(zhí)行了這個Callbacks。
基本模塊實現(xiàn)
簡單的實現(xiàn)：
我們先來簡單的實現(xiàn)一個Callbacks：
(function (window, undefined) {
var Callbacks = function () {
//通過閉包保護這些私有變量
var list = [],//回調(diào)函數(shù)列表
fired;//是否執(zhí)行過
//返回一個閉包的Callbakcs對象
return {
add: function (fn) {
//當Callbacks廢棄掉的時候，list為undefined
if (list) {
//添加一個回調(diào)函數(shù)
list.push(fn);
//支持鏈式回調(diào)
}
return this;
},
fireWith: function (context, data) {
//觸發(fā)回調(diào)函數(shù)，并指定上下文
if (list) {
fired = true;
for (var i = 0, len = list.length; i < len; i++) {
//當Callbacks中某一個函數(shù)返回false的時候，停止Callbacks后續(xù)的執(zhí)行
if (list[i].apply(context, data) === false)
break;
}
}
return this;
},
fire: function () {
//觸發(fā)回調(diào)函數(shù)
//調(diào)用fireWith并指定上下文
return this.fireWith(this, arguments);
},
empty: function () {
//清空list即可
if (list)//當這個Callbacks廢棄掉的時候，Callbacks不應(yīng)該可以繼續(xù)使用
list = [];
return this;
},
disable: function () {
//廢棄這個Callbacks對象，后續(xù)的回調(diào)函數(shù)列表不再執(zhí)行
list = undefined;
return this;
},
disabled: function () {//檢測這個Callbacks是否已經(jīng)廢掉
//轉(zhuǎn)換為boolean返回
return !list;
},
fired: function () {//這個callbacks是否執(zhí)行過
return !!fired;
}
};
};
//注冊到window下
window.Callbacks = Callbacks;
}(window));
然后我們測試一下這個Callbacks：
var test = new Callbacks();
test.add(function (value) {
console.log('函數(shù)1，value是：' + value);
});
test.add(function (value) {
console.log('函數(shù)2，value是：' + value);
});
test.fire('這是函數(shù)1和函數(shù)2的值');
console.log('查看函數(shù)是否執(zhí)行過：' + test.fired());
test.disable();//廢棄這個Callbacks
console.log('查看函數(shù)是否被廢棄：' + test.disabled());
test.add(function () {
console.log('添加第三個函數(shù)，這個函數(shù)不應(yīng)該被執(zhí)行');
});
test.fire();
打開瀏覽器的控制臺我們可以看見運行結(jié)果正常。
once和auto(memory)實現(xiàn)
once：
once讓這個callbacks中的函數(shù)運行一次之后就不再運行。原理非常的簡單，上面的代碼中，我們可以看見有一個變量list承接函數(shù)列表，所以我們只需要把過去執(zhí)行過的代碼清空即可。我們用一個全局變量，保存當前執(zhí)行模型，如果是once模型，就在fireWith()里讓這個list失效即可：
(function (window, undefined) {
var Callbacks = function (once) {
//通過閉包保護這些私有變量
var list = [],//回調(diào)函數(shù)列表
fired;//是否執(zhí)行過
//返回一個閉包的Callbakcs對象
return {
//...省略部分代碼
fireWith: function (context, data) {
//觸發(fā)回調(diào)函數(shù)，并指定上下文
if (list) {
fired = true;
for (var i = 0, len = list.length; i < len; i++) {
//當Callbacks中某一個函數(shù)返回false的時候，停止Callbacks后續(xù)的執(zhí)行
if (list[i].apply(context, data) === false)
break;
}
}
//如果配置了once模型，則全局變量once為true，則list重置
if (once) list = undefined;
return this;
}
//...省略部分代碼
};
};
//注冊到window下
window.Callbacks = Callbacks;
}(window));
auto：
auto（memory）模型在jQuery中是以memory命名的，最初被這個命名給混淆了，仔細看了用法才確定改成auto——它的作用就是“第一次fire()之后，后續(xù)add()的函數(shù)自動執(zhí)行”，以下情況可以用到：當添加一組函數(shù)到Callbacks之后，臨時又需要追加一個函數(shù)，那么即時運行這個新追加的函數(shù)——不得不說，為了使用的便利，這個模式變得有點難以理解。實現(xiàn)起來就是在add()的時候判斷是否是auto模型，如果是auto模型，則執(zhí)行這個函數(shù)。 但是，我們需要在第一次fire()之后才自動執(zhí)行，沒有fire()過的Callbacks并不該被自動執(zhí)行，并且，每次自動執(zhí)行后，還需要把最后一次使用的參數(shù)傳遞傳遞給這個自動執(zhí)行的函數(shù)。
或許大家會想到如下代碼：
(function (window, undefined) {
var Callbacks = function (once, auto) {
var list = [],
fired,
lastData;//保存最后一次執(zhí)行的參數(shù)
return {
add: function (fn) {
if (list) {
list.push(fn);
// — 自動執(zhí)行模式
//最后一次使用的參數(shù)傳遞過去，這里丟失了Context(上下文)
//為了不讓這里丟失上下文，我們或許還需要聲明一個變量保存最后一次使用的Context
if (auto) this.fire(lastData);
}
return this;
},
fireWith: function (context, data) {
if (list) {
lastData = data;// — 記錄最后一次使用的參數(shù)
fired = true;
for (var i = 0, len = list.length; i < len; i++) {
if (list[i].apply(context, data) === false)
break;
}
}
if (once) list = [];
return this;
}
//部分代碼省略
};
};
//注冊到window下
window.Callbacks = Callbacks;
}(window));
但是在jQuery里采用了更奇妙的用法，獲取jQuery作者也自豪這種用法，所以命名這個模型為memory——就是讓上面的變量auto不僅僅表示當前是auto執(zhí)行模式，并且作為最后一次參數(shù)的容器，它既表示了auto，也表示了memory。（下面的代碼非jQuery是根據(jù)jQuery代碼思路而寫，非源碼）：
(function (window, undefined) {
var Callbacks = function (auto) {
var list = [],
fired,
memory,//主演在這里，就是memory
coreFire = function (data) {
//真正的觸發(fā)函數(shù)方法
if (list) {
//&&表達式妙用
memory = auto && data;//記錄最后一次的參數(shù)，如果不是auto模式則不會記錄這個參數(shù)
//如果是auto模式，那么這個auto將不會為false，它會是一個數(shù)組
fired = true;
for (var i = 0, len = list.length; i < len; i++) {
if (list[i].apply(data[0], data[1]) === false)
break;
}
}
};
return {
add: function (fn) {
if (list) {
//添加一個回調(diào)函數(shù)
list.push(fn);
//自動執(zhí)行模式，注意如果auto模型
//memory是在coreFire()里賦值的，默認是false
if (memory) coreFire(auto);
}
//支持鏈式回調(diào)
return this;
},
fireWith: function (context, data) {
if (once) list = [];
//這里調(diào)用coreFire，把參數(shù)轉(zhuǎn)換為數(shù)組了
coreFire([context, data]);
return this;
}
/*部分代碼省略*/
};
};
window.Callbacks = Callbacks;
}(window));
我們在上一個auto實現(xiàn)的代碼中看到我們丟失了Context，jQuery早在fireWith()中修復(fù)了這個bug——在fireWith()中修復(fù)參數(shù)。jQuery把fireWith()中本來應(yīng)該執(zhí)行函數(shù)的邏輯給抽離出來，我們暫時將它命名為coreFire()，在原fireWith()中，將參數(shù)拼接成一個數(shù)組：第一個參數(shù)表示上下文，第二個參數(shù)表示傳遞進來的參數(shù)。然后執(zhí)行coreFire()。
在add()的時候，jQuery并沒有給變量auto（memory）賦值，而是選擇在coreFire()中給auto（memory）賦值，這樣就保證了第一次fire()之后才會開啟自動執(zhí)行。
按照上面所說，coreFire()接收的參數(shù)其實是一個數(shù)組，第一個參數(shù)是上下文，第二個參數(shù)是外面?zhèn)鬟f進來的參數(shù)。同時把這個數(shù)組賦值給auto（memory），這樣，變量auto（是否自動執(zhí)行模式）的定義就變成了memory（記憶最后一次傳遞的參數(shù)）。
真是一石二鳥的神思路，神想法，不得不點贊。我定義這個為auto是因為它的本身就是一個自動執(zhí)行的模型，順便保存了最后一次fire()的參數(shù)，而jQuery定義為memory或許也是作者感嘆這里的鬼斧神工吧。
至于once&auto就是把這兩個代碼揉合到一起而已，只需要在coreFire()里判定如果是auto模式，那么就把list重置為一個新的數(shù)組，否則直接設(shè)置為undefined即可。
源碼
這份代碼是自己對應(yīng)jQuery手寫的一份，將一些jQuery公有的函數(shù)都寫了進來，并非代碼片段，所以可以直接引用運行。
(function (window, undefined) {
/*
* 一個回調(diào)函數(shù)工具對象，注意這個工作對象工作完成之后就會清空數(shù)組:
* 提供一組普通的API，但它有如下工作模型 -
* once - 單次執(zhí)行模型：每次工作一次，后續(xù)不再工作
* auto - 自動執(zhí)行模型：每添加一個回調(diào)函數(shù)，自動執(zhí)行現(xiàn)有的回調(diào)函數(shù)集合里的所有回調(diào)函數(shù)，并將本次的參數(shù)傳遞給所有的回調(diào)函數(shù)
*
*/
//工具函數(shù)
var isIndexOf = Array.prototype.indexOf, //Es6
toString = Object.prototype.toString, //緩存toString方法
toSlice = Array.prototype.slice, //緩存slice方法
isFunction = (function () { //判定一個對象是否是Function
return "object" === typeof document.getElementById ?
isFunction = function (fn) {
//ie下對DOM和BOM的識別有問題
try {
return /^\s*\bfunction\b/.test("" + fn);
} catch (x) {
return false
}
} :
isFunction = function (fn) { return toString.call(fn) === '[object Function]'; };
})(),
each = function () { //循環(huán)遍歷方法
//第一個參數(shù)表示要循環(huán)的數(shù)組，第二個參數(shù)是每次循環(huán)執(zhí)行的函數(shù)
if (arguments.length < 2 || !isFunction(arguments[1])) return;
//為什么slice無效？？
var list = toSlice.call(arguments[0]),
fn = arguments[1],
item;
while ((item = list.shift())) {//沒有直接判定length，加速
// 為什么這里用call就可以，而apply就不行？
//搞定 - apply的第二個參數(shù)必須是一個array對象（沒有驗證array-like是否可以，而call沒有這個要求）
//apply是這樣描述的：如果 argArray（第二個參數(shù)） 不是一個有效的數(shù)組或者不是 arguments 對象，那么將導(dǎo)致一個 TypeError。
fn.call(window, item);
}
},
inArray = function () { //檢測數(shù)組中是否包含某項，返回該項索引
//預(yù)編譯
return isIndexOf ? function (array, elem, i) {
if (array)
return isIndexOf.call(array, elem, i);
return -1;
} : function (elem, array, i) {
var len;
if (array) {
len = array.length;
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
for (; i < len; i++) {
if (i in array && array[i] === elem) {
return i;
}
}
}
return -1;
}
}();
var Callbacks = function (option) {
option = toString.call(option) === '[object Object]' ? option : {};
//使用閉包，因為每個新建的callbacks都有自己的狀態(tài)
var list = [], //回調(diào)列表
_list = [], //如果鎖定這個callbacks對象，則清空list，將原list置入_list
fired, //是否執(zhí)行過
firingStart, //當前回調(diào)函數(shù)列表執(zhí)行的函數(shù)索引（起點）
firingLength, //回調(diào)函數(shù)的數(shù)組長度
auto, //標志是否自動執(zhí)行，如果需要自動執(zhí)行，則auto記憶著最后一次回調(diào)的參數(shù)（最后一次fire的參數(shù)），這是一個很詭異的且奇葩的用法
//這個變量用法很詭異和犀利，既包含了是否指定執(zhí)行的標志，又記錄了數(shù)據(jù)
//這個auto配合once簡直就是喪心病狂：【第一次】執(zhí)行了fire后才會自動執(zhí)行，配合once可以做到：一次執(zhí)行，后面不再追加和執(zhí)行代碼，保證了一組回調(diào)數(shù)據(jù)的穩(wěn)定和安全
stack = !option.once && [], //一個callbacks棧，如果當前正在執(zhí)行回調(diào)數(shù)組，而在執(zhí)行中又新添了回調(diào)函數(shù)，那么把新的回調(diào)函數(shù)，那么新的回調(diào)函數(shù)都會壓入該棧
firing = false, //callbacks是否正在工作/執(zhí)行
//觸發(fā)回調(diào)函數(shù)
fire = function (data) {
//注意這個data是個數(shù)組，如果配置了auto模式，那么auto永遠不會為false，因為auto會是個數(shù)組
auto = option.auto && data; //在這里，如果配置要求記憶最后的參數(shù)，則記憶這個參數(shù)（非常犀利的用法，直接取了數(shù)據(jù)）
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;//清空firingStart（不清空下次執(zhí)行有出問題啦）
firingLength = list.length; //緩存list長度，外界可以訪問
firing = true; //正在執(zhí)行回調(diào)函數(shù)
for (; firingIndex < firingLength; firingIndex++) {
if (list[firingIndex].apply(data[0], data[1]) === false) {
//注意，如果配置了option.auto（自動執(zhí)行），并且stack（棧）里存在函數(shù)，那么add()代碼里有一段對于auto判定會直接執(zhí)行本方法的代碼
//我們要阻止掉那段代碼，所以設(shè)置auto為false
auto = false;
break;
}//當函數(shù)返回false，終止執(zhí)行后續(xù)隊列
}
firing = false; //標志狀態(tài)已經(jīng)執(zhí)行完畢回調(diào)函數(shù)[stack(棧)里面的函數(shù)尚未執(zhí)行]
//如果這個棧在沒有配置once的情況下肯定是[]，所以一定存在
//這里主要作用是，如果沒有配置once，則攔截下面的代碼，如果配置了once，執(zhí)行完代碼清空數(shù)據(jù)
if (stack) {
if (stack.length)//先把下面清空list狀態(tài)的代碼攔截掉，再判定是否有棧
fire(stack.shift()); //從棧頭部取出，并遞歸fire()方法
}
else if (auto) //代碼走到這里，證明已經(jīng)配置了option.once（只執(zhí)行一次），于是把list清空
list = [];
else //證明沒有配置auto，但是配置了once，那么祭出終極大法，直接廢了這個callbacks對象
self.disable();
};
var self = {
add: function () {//添加一個回調(diào)函數(shù)
if (list) {
var start = list.length;
(function addCallback(args) {
each(args, function (item) {
if (isFunction(item)) {//是函數(shù)，則壓入回調(diào)列表
list.push(item);
//注意typeof 和Object.prototype.toString是不一樣的
} else if (toString.call(item) === '[object Array]') {//如果是個數(shù)組，則遞歸壓入回調(diào)列表，這個判定拋棄了array-like
addCallback(item);
}
});
})(arguments);
}
if (firing)//如果當前正有回調(diào)函數(shù)在執(zhí)行，那么需要更新當前回調(diào)函數(shù)列表的length，否則這個新壓入的回調(diào)函數(shù)就會被掠過。
firingLength = list.length;
else if (auto) {//如果當前沒有執(zhí)行回調(diào)函數(shù)，并且要求自動執(zhí)行
//注意這里是給firingStart賦值，上面fire方法中正在使用的是firingIndex，這里不會影響到上面代碼的執(zhí)行線路
firingStart = start;
//執(zhí)行我們新加入的小伙伴
fire(auto);
}
return this;
},
fire: function () {//觸發(fā)回調(diào)函數(shù)
self.fireWith(this, arguments);
return this;
},
fireWith: function (context, args) {//觸發(fā)回調(diào)函數(shù)，并指定上下文
//如果配置了once，stack將為undefined，而once又需要保證只執(zhí)行一次，所以一旦執(zhí)行過一次，這里的代碼不會再執(zhí)行
if (list && (!fired || stack)) {
//修正參數(shù)
//在這里,context索引為0
//而參數(shù)列表索引為2
//轉(zhuǎn)換為數(shù)組訪問是因為對象表示更加的消耗資源，在頂層的fire()代碼中有auto[記憶參數(shù)，自動執(zhí)行]這個功能，如果采用對象則開銷了更大的內(nèi)存
args = [context,
args ?
args.slice && args.slice()
|| toSlice.call(args) :
[]
];
fire(args);
}
return this;
},
remove: function () {//移除一個回調(diào)函數(shù)
if (list) {
each(arguments, function (item) {
var index;
//可能有多項，index可以在循環(huán)中表示檢索的范圍，之前檢索的過的可以不用再檢索
while ((index = inArray(item, list, index)) > -1) {
list.splice(index, 1);
if (firing) {
//保證上面fire中正在執(zhí)行的函數(shù)列表能夠正確運行，fire中設(shè)定全局這些變量為的就是這里可以異步移除
if (index <= firingLength)//修正長度
firingLength--;
if (index <= firingLength)//修正索引
firingIndex--;
}
}
});
}
return this;
},
has: function (fn) {//是否包含一個回調(diào)函數(shù)
return fn ? inArray(fn, list) > -1 : list && list.length;
},
empty: function () {//清空這個callbacks對象
list = [];
firingLength = 0;
return this;
},
disable: function () {//廢掉這個callbacks對象，后續(xù)的回調(diào)函數(shù)列表不再執(zhí)行
list = stack = auto = undefined;
return this;
},
disabled: function () {//是否已經(jīng)廢掉
return !list; //轉(zhuǎn)換為boolean
},
lock: function (isLock) {//鎖定或解鎖這個callbacks對象
//無參，判斷這個callbacks是否被鎖定
if (isLock == null) return !!_list;
if (isLock) {//鎖
_list = stack && list.concat(stack) || list;
list = undefined;
} else {//解鎖，jQuery并沒有提供解鎖功能，解鎖讓Callbacks變得不穩(wěn)定
list = _list;
_list = undefined;
}
return this;
},
fired: function () {//這個callbacks是否執(zhí)行過
//轉(zhuǎn)換為boolean，包括undefined，null,''等
return !!fired;
}
};
return self;
};
window.$ = window.$ || {};
window.$.Callbacks = window.Callbacks = Callbacks;
}(window));
下載
Github：https://github.com/linkFly6/linkfly.so/blob/master/LinkFLy/jQuery/jQuery.LinkFLy/Callbacks.js
以上就是本文給大家分享的全部內(nèi)容了，希望大家能夠喜歡。
- 自己動手實現(xiàn)jQuery Callbacks完整功能代碼詳解
- jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
- jQuery回調(diào)函數(shù)的定義及用法實例
- 使用jQuery中的when實現(xiàn)多個AJAX請求對應(yīng)單個回調(diào)的例子分享
- jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
- Jquery版本導(dǎo)致Ajax不執(zhí)行success回調(diào)函數(shù)
- jQuery AJAX回調(diào)函數(shù)this指向問題
- Jquery Post處理后不進入回調(diào)的原因及解決方法
- 從零學jquery之如何使用回調(diào)函數(shù)
- jquery.Callbacks的實現(xiàn)詳解
相關(guān)文章
etmvc+jQuery EasyUI+combobox多值操作實現(xiàn)角色授權(quán)實例
本篇文章主要介紹了etmvc+jQuery EasyUI+combobox多值操作實現(xiàn)角色授權(quán)，實現(xiàn)對角色role進行授權(quán)操作，有需要的可以了解一下。2016-11-11
這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實用，需要的朋友可以參考下2016-05-05
最近開發(fā)了一個項目，其中有功能要用戶點擊下拉框可以實現(xiàn)多選的效果，下文給大家分享實現(xiàn)核心代碼和combobox的取值與賦值的代碼，對easyui組合框相關(guān)知識感興趣的朋友一起看看吧2016-10-10
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標準定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣，在它們成為標準之前，Netscape和微軟各自不同地實現(xiàn)了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08
jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
ASP.NET jQuery 實例6 (實現(xiàn)CheckBoxList成員全選或全取消)
ASP.NET jQuery 實例6 (實現(xiàn)CheckBoxList成員全選或全取消) ，需要的朋友可以參考下。2012-01-01
使用jQuery動態(tài)設(shè)置單選框的選中效果
這篇文章主要介紹了使用jQuery動態(tài)設(shè)置單選框的選中效果,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
基于jQuery實現(xiàn)Div窗口震動特效代碼-代碼簡單
本文給大家介紹基于jiquery實現(xiàn)div窗口震動特效代碼，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery針對各類元素操作基礎(chǔ),包括jQuery基礎(chǔ)操作、選擇要操作的元素及處理DOM元素等,是深入學習jQuery所必備的基礎(chǔ)技能,需要的朋友可以參考下2014-08-08
jquery計算出left和top,讓一個div水平垂直居中的簡單實例
下面小編就為大家?guī)硪黄猨query計算出left和top,讓一個div水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07