如何重写For Each以使用承诺来阻止冻结浏览器?

2022-04-03 00:00:00 javascript ecmascript-6 es6-promise

我有一个函数,如下所示。

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

因为数组很长,并且函数有点占用资源,所以会冻结浏览器。

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

我找到了this question,其中使用setTimeout来处理它,但它看起来有点"un-es6-y",并且它不返回承诺。

我做不到

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

因为我需要一次又一次地运行承诺,我不确定它是否会在那里发生。


解决方案

您引用的答案是正确的,您需要setTimeout。单独使用Promise-Chain不会有帮助,因为.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());

当然,除非您可以使用工人。

相关文章