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

Question

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

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

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

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

Answer 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可用作旧版浏览器的后备。