簡單的回撥用法示例

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

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

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()（非同步函式）完成，因此該元素立即被隱藏，產生不良影響。