如何重写forEach使用Promises来阻止"冻结"浏览器？

Question

我有一个功能,看起来像这样.

 function () {
      longArray.forEach( element => doSomethingResourceIntensive(element))
 }

因为数组很长并且函数占用的资源很少,所以它会冻结浏览器.

现在我想用Promises重写它,所以它做同样的事情,只是不冻结浏览器,我希望解决方案优雅和"ES6-y"; 理想情况下,当所有迭代完成时,函数将返回Promise.

我发现了这个问题,使用setTimeout处理它,但它似乎有点"un-ES6-y",并且它不会返回Promise.

我不能做

 function () {
      return Promise.all(longArray.map( element => 
          Promise.resolve().then(() => doSomethingResourceIntensive(element))
      )
 }

因为我需要连续执行承诺,我不确定它是否会在那里发生.

Answer 1

您参考的答案是正确的，您需要setTimeout。单独使用承诺链不会有帮助，因为.then链在微任务队列上执行，在大多数浏览器中，微任务队列在当前运行到完成的末尾完全清空。换句话说，他们仍然会冻结东西。

如果你想要一些 ES6-y 的东西，我可以依靠这个值得信赖的帮手：

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));

然后我可以这样做：

longArray.reduce((p, i) => p.then(() => doIntensiveStuff(i)).then(() => wait(5)),
                 Promise.resolve());

当然，除非你可以使用工人。