小编典典

Javascript-如何避免在繁重的工作时阻塞浏览器?

javascript

我的JS脚本中有这样的功能:

function heavyWork(){
   for (i=0; i<300; i++){
        doSomethingHeavy(i);
   }
}

也许“
doSomethingHeavy”本身是可以的,但重复执行300次会导致浏览器窗口被卡住一段不可忽略的时间。在Chrome中,这并不是什么大问题,因为只有一个制表符有效。但对于Firefox来说,这是一场彻底的灾难。

有什么方法可以告诉浏览器/ JS“轻松一点”,而不是阻止对doSomethingHeavy的调用之间的所有操作?


阅读 479

收藏
2020-05-01

共1个答案

小编典典

您可以将呼叫嵌套在setTimeout呼叫中:

for(...) {
    setTimeout(function(i) {
        return function() { doSomethingHeavy(i); }
    }(i), 0);
}

这会将对的调用排队,以doSomethingHeavy立即执行,但是可以在它们之间加入其他JavaScript操作。

更好的解决方案是让浏览器通过Web Workers产生一个新的非阻塞过程,但这是特定于HTML5的。

编辑:

setTimeout(fn, 0)实际上,使用时间要比零毫秒长得多-例如,Firefox强制执行最少4毫秒的等待时间。更好的方法可能是使用 setZeroTimeout,它更喜欢postMessage瞬时的,可中断的函数调用,但setTimeout可用作旧版浏览器的后备。

2020-05-01