.forEach完成后執行回調函數

Question

我正在嘗試在forEach循環完成所有迭代之后執行函數。

這個答案提供了一個有趣的解決方案，但我無法使其正常工作。

這是我改編的代碼，創建了一個簡單的asyncFunction（）。

function callback () { console.log('all done'); }
function asyncFunction(item) {
  console.log("in async function, item is " + item)
}
var itemsProcessed = 0;

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

如在此JSfiddle中可見的那樣 ，腳本正確執行了異步函數，但未能輸入增加itemsProcessed並應觸發callback()函數的部分。

我對粗箭頭功能不太熟悉，因此錯誤可能是由於其用法引起的。

誰能解釋該腳本為何不按預期運行？

Answer 1

在這種情況下，更現代的方法是使用諾言

 function asyncFunction(item) { // return a promise return new Promise((resolve, reject) => { setTimeout(() => { console.log("in async function, item is " + item) // resolve promise when data is ready resolve(item) }, Math.random()*2000)// random delay to stagger order of returns }) } // create array of promises let promiseArray = [1, 2, 3].map(asyncFunction); // runs when all promises are resolved Promise.all(promiseArray).then(results => { console.log('all done') // results array will be in same order as original array console.log('results are: ', results) }) 

 .as-console-wrapper {max-height: 100%!important;top:0} 

Answer 2

將每個元素映射到Promise，然后使用Promise.all() 。

Promise.all([1, 2, 3].map(async num => num));

當然，您可以根據需要在異步函數中執行更復雜的操作。

Promise.all([1, 2, 3].map(num => 
{
    return new Promise((reject, resolve) =>
    {
        setTimeout(() => resolve(num), 5000);
    })
}));

而且，如果您正在執行的代碼是同步的或涉及超時，請使用Promise構造函數而不是異步函數。

Answer 3

因為您要將回調函數作為第二個參數傳遞給asyncFunction ，所以需要指定將有一個回調函數作為第二個參數，並且需要這樣調用：

function asyncFunction(item, cb) {
  console.log("in async function, item is " + item)
  cb()
}

另外，您的代碼可以重寫，以使您更容易理解回調函數的使用。 您的代碼：

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

是相同的：

[1, 2, 3].forEach((item, index, array) => {
  function cbFunc() {
    itemsProcessed++;
    console.log("in callback area, itemsProcessed is " + itemsProcessed )
    if(itemsProcessed === array.length) {
      callback();
    }
  }
  asyncFunction(item, cbFunc);
});