节点异步数组循环结果与预期不符

Question

function asyncForEach(array,cb) {
    array.forEach(function(i){
        setTimeout(cb(i),0);
    });
}
asyncForEach([1,2,3,4], function(i) {
    console.log(i);
});
console.log("After loop");

如您所见，上述代码片段的结果是

1
2
3
4
After loop

我所期望的是

After loop
1
2
3
4

我认为会发生的情况是函数 asyncForEach 将被添加到调用堆栈中，对于数组中的每个元素，setTimeout 中的回调将被推送到回调队列。控制台.log（"后循环"）;将被打印，然后调用堆栈将变为空，之后所有回调将逐个执行。但事实似乎并非如此。谁能解释一下？

谢谢。

Answer 1

问题是你在 forEach 中手动调用回调，并将其结果传递给 setTimeout。

setTimeout(cb(i), 0); // <-- you call cb(i) and pass its result into setTimeout

你想做的是这样的：

setTimeout(cb, 0, i);

或者更明确地说：

setTimeout(function() {
  cb(i);
}, 0);

完整示例：

function asyncForEach(array,cb) {
    array.forEach(function(i){
        setTimeout(cb, 0, i);
    });
}
asyncForEach([1,2,3,4], function(i) {
    console.log(i);
});
console.log("After loop");

Answer 2

要获得预期的输出，您需要进行以下更改：

function asyncForEach(array,cb) {
    array.forEach(function(i){
        setTimeout(function(){cb(i)},0); // CHANGE IS HERE
    });
}
asyncForEach([1,2,3,4], function(i) {
    console.log(i);
});
console.log("After loop");

基本上，当您在setTimeout函数中提供函数调用（不带括号）时，您实际上是在立即调用该函数。要在给定超时后安排函数调用，您必须在该setTimeout方法中提供函数，就像我在上面的示例中提供的那样。