jQuery Callback的基本實作與使用方法

在 js 開發中，由於沒有多線程，經常會遇到回調這個概念，比如說，在 ready 函數中註冊回調函數，註冊元素的事件處理等等。在比較複雜的場景下，當一個事件發生的時候，可能需要同時執行多個回呼方法，可以直接考慮到的實作就是實作一個佇列，將所有事件觸發時需要回呼的函數都加入到這個佇列中保存起來，當事件觸發的時候，從這個佇列重依序取出已儲存的函數並執行。

概述

$(document).ready()的簡寫。

允許你綁定一個在DOM文件載入完成後執行的函數。這個函數的作用如同$(document).ready()一樣，只不過用這個函數時，需要把頁面中所有需要在 DOM 載入完成時執行的$()運算子都包裝到其中。從技術上來說，這個函數是可連結的——但真正以這種方式連結的情況並不多。 你可以在一個頁面中使用任多個$(document).ready事件。參考 ready(Function) 以取得更多 ready 事件的資訊。

參數

callbackFunctionV1.0

當DOM載入完成後要執行的函數

可以如下簡單的實作。

首先，實作一個類別函數來表示這個回呼類別。在 javascript 中，使用陣列來表示這個佇列。

function Callbacks() {    this.list = [];
}

然後，透過原型實作類別中的方法。增加和刪除的函數都保存在陣列中，fire 的時候，可以提供參數，這個參數將會被傳遞給每個回呼函數。

Callbacks.prototype = {
    add: function(fn) {
        this.list.push(fn);
    },
    remove: function(fn){
        var position = this.list.indexOf(fn);
        if( position >=0){
            this.list.splice(position, 1);
        }
    },
    fire: function(args){
        for(var i=0; i<this.list.length; i++){
            var fn = this.list[i];
            fn(args);
        }
    }
};

測試程式碼如下：

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = new Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

或者，不使用原型，直接透過閉包來實現。

function Callbacks() {
    
    var list = [];
    
    return {
         add: function(fn) {
            list.push(fn);
        },
        
        remove: function(fn){
            var position = list.indexOf(fn);
            if( position >=0){
                list.splice(position, 1);
            }
        },
        
        fire: function(args) {
            for(var i=0; i<list.length; i++){
                var fn = list[i];
                fn(args);
            }    
        }
    };
}

這樣的話，範例程式碼也需要調整一下。我們直接對用 Callbacks 函數就可以了。

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

下面我們使用第二種方式繼續進行。

對於更複雜的場景來說，我們需要只能 fire 一次，以後即使呼叫了 fire ，也不再生效了。

比如說，可能在創建物件的時候，成為這樣的形式。這裡使用 once 表示僅僅能夠 fire 一次。

var callbacks = Callbacks("once");

那麼，我們的程式碼也需要進行調整。其實很簡單，如果設定了 once，那麼，在 fire 之後，將原來的隊列中直接幹掉就可以了。

function Callbacks(options) {
    var once = options === "once";
    var list = [];
    
    return {
         add: function(fn) {
            if(list){
                list.push(fn);
            }
        },
        
        remove: function(fn){
            if(list){
                var position = list.indexOf(fn);
                if( position >=0){
                    list.splice(position, 1);
                }
            }
        },
        
        fire: function(args) {
            if(list)
            {
                for(var i=0; i<list.length; i++){
                    var fn = list[i];
                    fn(args);
                }
            }
            if( once ){
                list = undefined;
            }
        }
    };
}

jQuery 中，不只提供了 once 一種方式，而是提供了四種類型的不同方式：

once: 只能夠觸發一次。

memory: 當佇列已經觸發之後，再加入進來的函數就會直接被調用，不需要再觸發一次。

unique: 保證函數的唯一

stopOnFalse: 只要有一個回呼回傳 false，就中斷後繼的呼叫。

這四種方式可以組合，使用空格分隔傳入建構函數即可，例如$.Callbacks("once memory unique");

官方文件中，提供了一些使用的範例。

callbacks.add(fn1, [fn2, fn3,...])//增加一個/多個回呼
callbacks.remove(fn1, [fn2, fn3,...])/ /移除一個/多個回呼
callbacks.fire(args)//觸發回調，將args傳給fn1/fn2/fn3…
callbacks.fireWith(context, args)//指定上下文context然後觸發回呼
callbacks.lock()//鎖定佇列目前的觸發狀態
callbacks.disable()//禁掉管理器，也就是所有的fire都不生效

以上是jQuery Callback的基本實作與使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！