如何重写For Each以使用承诺来阻止冻结浏览器?
我有一个函数,如下所示。
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());
当然,除非您可以使用工人。
相关文章