前言：

作為引數傳遞給另一個函式執行的函式我們稱為回撥函式，那麼該回調又是否是非同步的呢，何謂非同步，如：作為事件處理器，或作為引數傳遞給

(setTimeout，setInterval)這樣的非同步函式，或作為ajax傳送請求，應用於請求各種狀態的處理，我們可以稱為非同步回撥，jQuery.Callbacks

為我們封裝了一個回撥物件模組，我們先來看一個應用場景：

// 為什麼jQuery中的ready事件可以執行多個回撥，這得益於我們的jQuery.Deferred遞延物件(是基於jQuery.Callbacks回撥模組)
jQuery(function($) {
    console.log(
 
'document is ready!');
    // do something
});

jQuery(function($) {
    // do something
});

// 實現原型
// jQuery.Deferred版程式碼
var df = jQuery.Deferred();
df.resolve(); // 在ready事件中呼叫

// 可以多次執行繫結的函式
df.done(fn1, fn2, fn3);
df.done(fn4);
// ...


// jQuery.Callbacks版程式碼
var cb = jQuery.Callbacks('once memory');
cb.fire(); 
 
// 在ready事件中呼叫

// 可以多次執行繫結的函式
cb.add(fn1, fn2, fn3);
cb.add(fn4);
// ...

現在我們知道jQuery中的ready事件是可以這樣執行多個回撥的，要想深入理解其原始碼，讓我們繼續看下面吧

jQuery回撥、遞延物件總結篇索引：

一、jQuery.Callbacks設計思路

使用一個私有變數list(陣列)儲存回撥，執行jQuery.Callbacks函式將返回一個可以操作回撥列表list的介面物件，
而傳入jQuery.Callbacks函式的options引數則用來控制返回的回撥物件操作回撥列表的行為

回撥物件中的方法

{
    add:        增加回調到list中
    remove:     從list中移除回撥
    fire:       觸發list中的回撥
    fired:      回撥物件是否執行過fire方法
    fireWith:   觸發list中的回撥，第一個引數為執行域
    has:        判斷函式是否在list中
    empty:      將list致空，list = [];
    lock:       鎖定list
    locked:     是否鎖定
    disable:    禁用回撥物件
    disabled:   是否禁用
}

引數標誌:

options = {
    once:       回撥物件僅觸發(fire)一次

    memory:     跟蹤記錄每一次傳遞給fire函式的引數，在回撥物件觸發後(fired)，
                將最後一次觸發(fire)時的引數(value)傳遞給在add操作後即將被呼叫的回撥

    unique:     在add操作中，相同的函式僅只一次被新增(push)到回撥列表中

    stopOnFalse:當回撥函式返回false，中斷列表中的回撥迴圈呼叫，且memory === false，阻止在add操作中將要觸發的回撥
}

二、原始碼解析

var // Used for splitting on whitespace
    core_rnotwhite = /\S+/g;

var optionsCache = {};

// Convert String-formatted options into Object-formatted ones and store in cache
// 將字串格式選項轉化成物件格式形式，並存儲在快取物件optionsCache[options]中
// 該快取起作用適用於執行多次jQuery.Callbacks函式，且傳遞options引數一致，我們在jQuery.Deferred
// 原始碼就可以看到tuples二維陣列中執行了兩次jQuery.Callbacks('once memory')
function createOptions( options ) {
    var object = optionsCache[ options ] = {};
    jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
        object[ flag ] = true;
    });
    return object;
}
jQuery.Callbacks = function( options ) {

    // Convert options from String-formatted to Object-formatted if needed
    // (we check in cache first)
    options = typeof options === "string" ?
        ( optionsCache[ options ] || createOptions( options ) ) :
        jQuery.extend( {}, options );

    var // Flag to know if list is currently firing
        firing,
        // Last fire value (for non-forgettable lists)
        memory,
        // Flag to know if list was already fired
        fired,
        // End of the loop when firing
        firingLength,
        // Index of currently firing callback (modified by remove if needed)
        firingIndex,
        // First callback to fire (used internally by add and fireWith)
        firingStart,
        // Actual callback list
        list = [],
        // Stack of fire calls for repeatable lists
        stack = !options.once && [],
        // Fire callbacks
        fire = function( data ) {
            memory = options.memory && data;
            fired = true;
            firingIndex = firingStart || 0;
            firingStart = 0;
            firingLength = list.length;
            firing = true;
            // 迭代list回撥列表，列表中的回撥被應用(或執行回撥)
            for ( ; list && firingIndex < firingLength; firingIndex++ ) {
                // 如果回撥返回false，且options.stopOnFlase === true，則中斷迴圈
                // 注：data[1]是一個偽陣列(self.fire方法中的arguments(引數集合))
                if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {                    
                    memory = false; // To prevent further calls using add   // 阻止在add操作中可能執行的回撥
                    break;
                }
            }
            firing = false;
            if ( list ) {
                // (options.once === undefined)，回撥物件可以觸發多次
                if ( stack ) {
                    // 處理正在執行的回撥中的fireWith操作
                    // 注：如果執行的回撥中真的擁有fire或fireWith操作，那麼列表中的回撥將會無限迴圈的執行，請看例項1
                    if ( stack.length ) {
                        fire( stack.shift() );
                    }
                }
                // (options.once === true && options.memory === true)
                // 回撥列表致空，但允許add繼續新增並執行回撥
                else if ( memory ) {
                    list = [];
                }
                // (options.once === true && options.memory === undefined)
                // 禁用回撥物件
                else {
                    self.disable();
                }
            }
        },
        // Actual Callbacks object
        self = {
            // Add a callback or a collection of callbacks to the list
            add: function() {
                if ( list ) {
                    // First, we save the current length
                    var start = list.length;
                    (function add( args ) {
                        jQuery.each( args, function( _, arg ) {
                            var type = jQuery.type( arg );
                            if ( type === "function" ) {
                                // 回撥不唯一 或 唯一且不存在，則push
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && type !== "string" ) {
                                // Inspect recursively
                                // 遞迴檢查
                                add( arg );
                            }
                        });
                    })( arguments );

                    // Do we need to add the callbacks to the
                    // current firing batch?
                    // 如果正在執行的回撥執行了add操作，更新firingLength，將列表中新加進來的最後一個回撥加入到回撥執行的佇列中
                    if ( firing ) {
                        firingLength = list.length;

                    // With memory, if we're not firing then
                    // we should call right away
                    // 如果可能(options.memory === true)，在回撥物件不能再次fire(options.once === true)時，
                    // 我們應該使用memory(記錄的最後一次fire時的引數)立即呼叫回撥
                    } else if ( memory ) {
                        firingStart = start;
                        fire( memory );
                    }
                }
                return this;
            },
            // Remove a callback from the list
            remove: function() {
                if ( list ) {
                    jQuery.each( arguments, function( _, arg ) {
                        var index;
                        while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
                            list.splice( index, 1 );
                            // Handle firing indexes
                            // 在回撥物件觸發(fire)時，如果firingLength、firingIndex(正在執行的回撥在列表list中的索引index)
                            // 大於等於 移除的回撥的索引(index)，分別減一，確保回撥執行佇列中未執行的回撥依次執行
                            if ( firing ) {
                                if ( index <= firingLength ) {
                                    firingLength--;
                                }
                                if ( index <= firingIndex ) {
                                    firingIndex--;
                                }
                            }
                        }
                    });
                }
                return this;
            },
            // Check if a given callback is in the list.
            // If no argument is given, return whether or not list has callbacks attached.
            // 檢查給定的回撥是否在列表中
            // 如果未給定回撥引數，返回列表是否有回撥
            has: function( fn ) {
                return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
            },
            // Remove all callbacks from the list
            // 將列表致空，list = []; firingLenght = 0;
            empty: function() {
                list = [];
                firingLength = 0;
                return this;
            },
            // Have the list do nothing anymore
            // 禁用回撥物件
            // 將list賦值為undefined就可以使self中的add，remove，fire，fireWith方法停止工作
            // 我認為這裡把stack、memory賦值為undefined與否是沒有任何關係的
            disable: function() {
                list = stack = memory = undefined;
                return this;
            },
            // Is it disabled?
            disabled: function() {
                return !list;
            },
            // Lock the list in its current state
            // 鎖定回撥列表
            // 如果(fired !== true || options.memory === false)，則視為禁用(disable)
            // 如果(fired === true && options.memory === true)，則視為options.once === true
            // 請看例項2
            lock: function() {
                stack = undefined;
                if ( !memory ) {
                    self.disable();
                }
                return this;
            },
            // Is it locked?
            locked: function() {
                return !stack;
            },
            // Call all callbacks with the given context and arguments
            fireWith: function( context, args ) {
                // 回撥物件未執行過fire 或且 可以執行多次(options.once === false)
                // 如果(fired === true && options.once === true)，則不會執行fire操作
                if ( list && ( !fired || stack ) ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ];
                    if ( firing ) {
                        stack.push( args );
                    } else {
                        fire( args );
                    }
                }
                return this;
            },
            // Call all the callbacks with the given arguments
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            // To know if the callbacks have already been called at least once
            fired: function() {
                return !!fired;
            }
        };

    return self;
};

三、例項

例項1、 處理回撥函式中的fire，或fireWidth操作

var cb = jQuery.Callbacks();

var fn1 = function(arg){ console.log( arg + '1' ); };
var fn2 = function(arg){ console.log( arg + '2' ); cb.fire();  };
var fn3 = function(arg){ console.log( arg + '3' ); };

cb.add(fn1, fn2, fn3);

cb.fire('fn'); // 其中回撥fn1,fn2,fn3無限制的迴圈呼叫

/*
控制檯將無限制輸出如下:
fn1
fn2
fn3
fn1
fn2
fn3
fn1
fn2
fn3
.
.
.
*/

例項2、 鎖定(lock)操作各種場景中的用法

var cb1 = jQuery.Callbacks();
var cb2 = jQuery.Callbacks('memory');
var cb3 = jQuery.Callbacks('memory');

var fn1 = function(arg){ console.log( arg + '1' ); };
var fn2 = function(arg){ console.log( arg + '2' ); };
var fn3 = function(arg){ console.log( arg + '3' ); };

// 如果options.memory !== true，鎖定操作視為禁用回撥物件
cb1.add(fn1);
cb1.lock();
// 以下操作無任何反應
cb1.add(fn2);
cb1.fire('fn');

// 如果fried !== true，鎖定操作也視為禁用回撥物件
cb2.add(fn1);
cb2.lock();
// 以下操作無任何反應
cb2.add(fn2);
cb2.fire('fn');

// 如果(fired === true && options.memory === true)，鎖定操作類似控制標誌once(options.once === true);
cb3.add(fn1);
cb3.fire('fn'); // fn1，此時fired === true
cb3.lock();     // 像是傳入了'once'標誌，jQuery.Callbacks('once memory');
cb3.add(fn2);   // fn2
cb3.fire('fn'); // 再次觸發，無任何反應
cb3.add(fn3);   // fn3


// 再來看看jQuery.Deferred中的一段原始碼
var tuples = [
    // action, add listener, listener list, final state
    [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
    [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
    [ "notify", "progress", jQuery.Callbacks("memory") ]
];

// Handle state
if ( stateString ) {
    list.add(function() {
        // state = [ resolved | rejected ]
        state = stateString;

    // [ reject_list | resolve_list ].disable; progress_list.lock
    }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
}

/*
    當執行了tuples中前面兩組中任意一個回撥物件的fire方法時，後一組回撥物件被鎖定，
    相當於(fired === true && options.memory === true)，後一組回撥物件實際為執行
    jQuery.Callbacks('once memory')生成的回撥物件。
*/

PS: 如有描述錯誤，請幫忙指正，如果你們有不明白的地方也可以發郵件給我，

　　如需轉載，請附上本文地址及出處：部落格園華子yjh，謝謝！