簡單的回撥用法示例

回撥提供了一種擴充套件函式(或方法)功能而無需更改其程式碼的方法。這種方法通常用在模組(庫/外掛)中,其程式碼不應該被更改。

假設我們編寫了以下函式,計算給定值陣列的總和:

function foo(array) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        sum += array[i];
    }
    return sum;
}

現在假設我們想要對陣列的每個值做一些事情,例如使用 alert() 顯示它。我們可以在 foo 的程式碼中進行適當的更改,如下所示:

function foo(array) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        alert(array[i]);
        sum += array[i];
    }
    return sum;
}

但是,如果我們決定使用 console.log 而不是 alert() 呢?顯然,每當我們決定用每個值做其他事情時,改變 foo 的程式碼並不是一個好主意。如果沒有改變 foo 的程式碼,可以選擇改變主意。這正是回撥的用例。我們只需稍微改變 foo 的簽名和正文:

function foo(array, callback) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        callback(array[i]);
        sum += array[i];
    }
    return sum;
}

現在我們可以通過改變引數來改變 foo 的行為:

var array = [];
foo(array, alert);
foo(array, function (x) {
    console.log(x);
});

非同步函式示例

在 jQuery 中,獲取 JSON 資料的 $.getJSON() 方法是非同步的。因此,在回撥中傳遞程式碼可確保在獲取 JSON 之後呼叫程式碼。

$.getJSON() 語法:

$.getJSON( url, dataObject, successCallback );

$.getJSON() 程式碼示例:

$.getJSON("foo.json", {}, function(data) {
    // data handling code
});

以下將工作,因為資料處理程式碼可能會被呼叫之前實際接收到的資料,因為 $.getJSON 函式將未指定的時間長,因為它等待 JSON 不成立呼叫堆疊。

$.getJSON("foo.json", {});
// data handling code

另一個非同步函式的例子是 jQuery 的 animate() 函式。因為執行動畫需要一段指定的時間,所以有時需要在動畫後直接執行一些程式碼。

.animate() 語法:

jQueryElement.animate( properties, duration, callback );

例如,要建立淡出動畫,然後元素完全消失,可以執行以下程式碼。注意使用回撥。

elem.animate( { opacity: 0 }, 5000, function() {
    elem.hide();
} );

這允許在函式完成執行後立即隱藏元素。這不同於:

elem.animate( { opacity: 0 }, 5000 );
elem.hide();

因為後者不等待 animate()(非同步函式)完成,因此該元素立即被隱藏,產生不良影響。