完成所有异步forEach回调后的回调

Question

正如标题所示.我该怎么做呢？

我想whenAllDone()在forEach-loop遍历每个元素并完成一些异步处理之后调用.

[1, 2, 3].forEach(
  function(item, index, array, done) {
     asyncFunction(item, function itemDone() {
       console.log(item + " done");
       done();
     });
  }, function allDone() {
     console.log("All done");
     whenAllDone();
  }
);

有可能让它像这样工作吗？当forEach的第二个参数是一个回调函数,它在经过所有迭代后运行？

预期产量:

3 done
1 done
2 done
All done!

Answer 1

Array.forEach 没有提供这种精确性(哦,如果它会)但有几种方法来实现你想要的:

使用简单的计数器

function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});

(感谢@vanuan和其他人)这种方法保证在调用"完成"回调之前处理所有项目.您需要使用在回调中更新的计数器.取决于索引参数的值不提供相同的保证,因为不保证异步操作的返回顺序.

使用ES6承诺

(promise库可用于旧版浏览器):

1. 处理保证同步执行的所有请求(例如1然后2然后3)

   function asyncFunction (item, cb) {
     setTimeout(() => {
       console.log('done with', item);
       cb();
     }, 100);
   }
   
   let requests = [1, 2, 3].reduce((promiseChain, item) => {
       return promiseChain.then(() => new Promise((resolve) => {
         asyncFunction(item, resolve);
       }));
   }, Promise.resolve());
   
   requests.then(() => console.log('done'))
   

2. 处理所有异步请求而不执行"同步"(2可能比1更快完成)

   let requests = [1,2,3].map((item) => {
       return new Promise((resolve) => {
         asyncFunction(item, resolve);
       });
   })
   
   Promise.all(requests).then(() => console.log('done'));
   

使用异步库

还有其他异步库,async是最受欢迎的,它们提供了表达所需内容的机制.

编辑

问题的主体已被编辑,以删除以前的同步示例代码,所以我已更新我的答案澄清.原始示例使用同步代码来模拟异步行为,因此应用了以下内容:

array.forEach是同步的,所以是res.write,这样你就可以简单地把你的回调后您的来电的foreach:

  posts.foreach(function(v, i) {
    res.write(v + ". index " + i);
  });

  res.end();

Answer 2

如果你遇到异步函数,并且你想确保在执行代码之前完成它的任务,我们总是可以使用回调功能.

例如:

var ctr = 0;
posts.forEach(function(element, index, array){
    asynchronous(function(data){
         ctr++; 
         if (ctr === array.length) {
             functionAfterForEach();
         }
    })
});

注意:functionAfterForEach是在foreach任务完成后执行的函数.asynchronous是在foreach中执行的异步函数.

希望这可以帮助.

Answer 3

很奇怪有多少错误答案给了异步案例!可以简单地显示检查索引不提供预期的行为:

// INCORRECT
var list = [4000, 2000];
list.forEach(function(l, index) {
    console.log(l + ' started ...');
    setTimeout(function() {
        console.log(index + ': ' + l);
    }, l);
});

输出:

4000 started
2000 started
1: 2000
0: 4000

如果我们检查index === array.length - 1,第一次迭代完成时将调用回调,而第一个元素仍然未决!

为了在不使用异步等外部库的情况下解决这个问题,我认为最好的办法是保存列表的长度,并在每次迭代后减少.由于只有一个线程,我们确信没有竞争条件的可能性.

var list = [4000, 2000];
var counter = list.length;
list.forEach(function(l, index) {
    console.log(l + ' started ...');
    setTimeout(function() {
        console.log(index + ': ' + l);
        counter -= 1;
        if ( counter === 0)
            // call your callback here
    }, l);
});

Answer 4

希望这能解决你的问题,当我需要执行forEach内部的异步任务时,我通常会使用它.

foo = [a,b,c,d];
waiting = foo.length;
foo.forEach(function(entry){
      doAsynchronousFunction(entry,finish) //call finish after each entry
}
function finish(){
      waiting--;
      if (waiting==0) {
          //do your Job intended to be done after forEach is completed
      } 
}

同

function doAsynchronousFunction(entry,callback){
       //asynchronousjob with entry
       callback();
}

Answer 5

使用ES2018，您可以使用异步迭代器：

const asyncFunction = a => fetch(a);
const itemDone = a => console.log(a);

async function example() {
  const arrayOfFetchPromises = [1, 2, 3].map(asyncFunction);

  for await (const item of arrayOfFetchPromises) {
    itemDone(item);
  }

  console.log('All done');
}