JavaScript 简单的回调用法示例

示例

回调提供了一种扩展功能（或方法）的功能而无需更改其代码的方法。这种方法通常用在模块（库/插件）中，不应更改其代码。

假设我们编写了以下函数，计算给定值数组的总和：

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数据的方法是异步的。因此，在回调中传递代码可确保在获取JSON之后调用该代码。$.getJSON()

$.getJSON() 语法：

$.getJSON( url, dataObject, successCallback );

代码示例：$.getJSON()

$.getJSON("foo.json", {}, function(data) {
    // 数据处理代码
});

以下将不工作，因为数据处理代码可能会被调用之前实际接收到的数据，因为该$.getJSON功能需要未指定的时间长，因为它等待JSON不成立调用堆栈。

$.getJSON("foo.json", {});
// 数据处理代码

异步函数的另一个示例是jQuery的animate()函数。由于运行动画需要花费指定的时间，因此有时最好直接在动画之后运行一些代码。

.animate() 语法：

jQueryElement.animate( properties, duration, callback );

例如，要创建淡出动画，然后元素完全消失，可以运行以下代码。注意回调的使用。

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

这允许在函数完成执行后立即隐藏元素。这不同于：

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

因为后者不等待animate()（异步函数）完成，因此该元素立即被隐藏，从而产生不良效果。