javascript - 在异步回调中使用 _.after() ，污染数组变量

Question

我希望这个问题不是重复的，我在这里搜索了类似的问题，但没有得到匹配的结果。

在node.js中，下面的代码污染了storage变量。我真的不明白为什么。

var _ = require('underscore'); // same result by using lodash

function add(arr, callback) {
    var l = arr.length,
        storage = [];

    function doCallback() {
        callback(storage);
    }

    returnStorage = _.after(l, doCallback);
    _.each(arr, function (a) {
        _.delay(function () {
            storage.push(a);
            returnStorage();
        }, 10);
    });
}

function callbackHandler(result) {
    console.log(result);
}

add([1,2,3], callbackHandler),
add([4,5,6,7], callbackHandler);

// in console will print wrong result:
// [ 4 ]
// [ 4, 5 ]
// [ 4, 5, 6 ]
// [ 4, 5, 6, 7 ]

但是，如果我不使用 _.after() 它将给出预期的结果。使用下划线或lodash给出相同的结果。

下面的代码工作正常。

var _ = require('underscore'); // same result by using lodash

function add(arr, callback) {
    var l = arr.length,
        storage = [];

    function returnStorage() {
        if (storage.length == l) {
            callback(storage);
        }
    }

    _.each(arr, function (a) {
        _.delay(function () {
            storage.push(a);
            returnStorage();
        }, 10);
    });
}

function callbackHandler(result) {
    console.log(result);
}

add([1,2,3], callbackHandler),
add([4,5,6,7], callbackHandler);

// in console will print correct result:
// [ 1, 2, 3 ]
// [ 4, 5, 6, 7 ]

我应该如何确定根本原因!

Answer 1

JavaScript 上下文的魔力。当你做的时候:

returnStorage = _.after(l, doCallback);

returnStorage 与第二次调用 add 相同。

您需要使用 var 声明它，以使其成为函数的新内容和本地内容。

var _ = require('underscore'); // same result by using lodash

function add(arr, callback) {
    var l = arr.length,
        storage = [];

    function doCallback() {
        callback(storage);
    }

    var returnStorage = _.after(l, doCallback);
    _.each(arr, function (a) {
        _.delay(function () {
            storage.push(a);
            returnStorage();
        }, 10);
    });
}

function callbackHandler(result) {
    console.log(result);
}

add([1,2,3], callbackHandler),
add([4,5,6,7], callbackHandler);

// in console:
// [ 1, 2, 3 ]
// [ 4, 5, 6, 7 ]

一些解释:

第一次调用 add() 时，returnStorage 为未定义。然后它将被定义为全局上下文，因为它们之前没有 var 。

在第二次调用时，会声明该变量，并且在设置它时，也会为第一次 add() 调用设置它。因此，10 毫秒后，[1,2,3] 的每个元素都调用了 returnStorage(第二个)，[4,5,6] 的下一个元素也已调用,7] 将触发 returnStorage 回调，任何进一步的调用也会触发它。