在循环内使用异步函数并仅在循环完成后调用回调答案

【问题标题】：Using async function inside a loop and calling a callback only after the loop has finished在循环内使用异步函数并仅在循环完成后调用回调
【发布时间】：2017-01-17 16:53:34
【问题描述】：

我正在尝试编写一个在循环中调用异步函数的函数，并且只有在循环完成后，才能使用结果调用回调。

类似这样的：

function foo(cb){
    var result;
    for(var i=0; i < 999; i++){
        asyncFunction(i, function(val){
            do something with result
        });
    }
    cb(result);
}

但我看到它在真正完成从所有asyncFunction 调用返回之前到达cb(result);。

在调用cb 之前，可以做些什么让它等待完成循环？承诺会有帮助吗？

【问题讨论】：

是的。承诺是正确的方式
但是我不会遇到同样的问题吗？什么将表明承诺已兑现？ @Rajesh
以下是使用回调的示例JSFiddle。你必须使用 promise 来做类似的事情
我担心将我的函数从循环更改为递归可能会导致堆栈溢出，循环的范围可能非常大。 @Rajesh

标签： javascript asynchronous syntax callback

【解决方案1】：

也许这对你有更多帮助：

function asyncFunction (callback) {
  // Do stuff
  return callback()
}

function foo () {
  var result = 0
  for (var i = 0; i < 999;) {
    asyncFunction(function () {
      i++
      result += i
    })
  }
  console.log(result)
}

foo()

【讨论】：

它不适合我，这是一个小提琴：jsfiddle.net/ahrxc9gg 请记住，如果 asyncFunction 需要 500 毫秒才能完成，那么脚本将需要大约 8 分钟才能工作......
我的意思是当我的实际函数改变为这样工作时，可能是因为边界大于 999 并且 asyncFunction 更重......
可能，尝试将其更改为 2 而不是 999，然后您可以验证是否是因为某种内存泄漏或仅仅是因为它需要太多时间。

【解决方案2】：

异步库具有您需要的所有功能：http://caolan.github.io/async/

【讨论】：

看起来像一个不错的库，但我不喜欢只为一个函数添加完整的库...
你不需要添加完整的库，你可以使用 ES2015 的导入特性，只添加你需要的功能：$ npm install --save async-esimport {MODULE_YOU_NEED} from 'async-es/{MODULE_YOU_NEED}'; import async from 'async-es';
我在客户端需要这个，你应该在控制台中运行import {MODULE_YOU_NEED}... 吗？因为它在 Windows 中不起作用。
这是一个 ES2015 特性：babeljs.io/learn-es2015/#ecmascript-2015-features-modules
有没有办法将我需要的库的一部分带到浏览器中？（每个系列）