在 .forEach 完成后执行回调函数

sc2*_*c28 2 javascript foreach callback

我试图在 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();
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

正如在此JSfiddle 中可见,脚本正确执行了异步函数,但未能进入递增itemsProcessed且应触发该callback()函数的部分。

我对胖箭头函数不太熟悉,所以错误可能来自它们的使用。

谁能解释为什么脚本没有按预期运行?

cha*_*tfl 5

在这种情况下,更现代的方法是使用承诺

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)
})
Run Code Online (Sandbox Code Playgroud)
.as-console-wrapper {max-height: 100%!important;top:0}
Run Code Online (Sandbox Code Playgroud)