我的 JS 脚本中有这样一个函数：
function heavyWork(){
for (i=0; i<300; i++){
doSomethingHeavy(i);
}
}
也许“doSomethingHeavy”本身没问题，但重复 300 次会导致浏览器窗口卡住一段不可忽略的时间。在 Chrome 中这不是什么大问题，因为只有一个 Tab 受到影响；但对于 Firefox 来说，这是一场彻头彻尾的灾难。
有什么方法可以告诉浏览器/JS“放轻松”而不是阻止调用 doSomethingHeavy 之间的所有内容？
您可以将您的电话嵌套在setTimeout电话中：
for(...) {
setTimeout(function(i) {
return function() { doSomethingHeavy(i); }
}(i), 0);
}
这将调用排队以doSomethingHeavy立即执行，但其他 JavaScript 操作可以插入它们之间。
更好的解决方案是实际上让浏览器通过Web Workers产生一个新的非阻塞进程，但这是 HTML5 特定的。
编辑：
使用setTimeout(fn, 0)实际花费的时间比零毫秒长得多——例如，Firefox强制执行最少 4 毫秒的等待时间。更好的方法可能是使用setZeroTimeout，它更喜欢postMessage即时的、可中断的函数调用，但setTimeout用作旧浏览器的后备。
您可以尝试将每个函数调用包装在 a 中setTimeout，超时时间为 0。这会将调用推送到堆栈底部，并且应该让浏览器在每个调用之间休息。
function heavyWork(){
for (i=0; i<300; i++){
setTimeout(function(){
doSomethingHeavy(i);
}, 0);
}
}
编辑：我刚刚意识到这行不通。i每次循环迭代的值都相同，您需要进行闭包。
function heavyWork(){
for (i=0; i<300; i++){
setTimeout((function(x){
return function(){
doSomethingHeavy(x);
};
})(i), 0);
}
}
我们需要每隔一段时间向浏览器释放控制权，以避免垄断浏览器的注意力。
释放控制权的一种方法是使用 a setTimeout，它计划在某个时间段调用“回调”。例如：
var f1 = function() {
document.body.appendChild(document.createTextNode("Hello"));
setTimeout(f2, 1000);
};
var f2 = function() {
document.body.appendChild(document.createTextNode("World"));
};
调用f1此处会将单词添加hello到您的文档中，安排一个待处理的计算，然后将控制权释放给浏览器。最终，f2将被调用。
请注意，setTimeout像魔法小精灵一样不加选择地在整个程序中撒播是不够的：您确实需要在回调中封装其余的计算。通常，setTimeout将是函数中的最后一件事，其余的计算都塞进回调中。
对于您的特定情况，需要仔细将代码转换为以下内容：
var heavyWork = function(i, onSuccess) {
if (i < 300) {
var restOfComputation = function() {
return heavyWork(i+1, onSuccess);
}
return doSomethingHeavy(i, restOfComputation);
} else {
onSuccess();
}
};
var restOfComputation = function(i, callback) {
// ... do some work, followed by:
setTimeout(callback, 0);
};
这将在每个restOfComputation.
作为另一个具体示例，请参阅：如何将一系列声音 HTML5 <audio> 声音剪辑排队以按顺序播放？
高级 JavaScript 程序员需要知道如何进行这种程序转换，否则他们会遇到您遇到的问题。你会发现如果你使用这种技术，你将不得不以一种特殊的风格编写你的程序，其中每个可以释放控制的函数都接受一个回调函数。这种风格的技术术语是“持续传递风格”或“异步风格”。
我看到两种方式：
a) 您可以使用 Html5 功能。那么你可以考虑使用一个工作线程。
b）您拆分此任务并将消息排队，该消息一次只执行一次调用，并在有事可做时进行迭代。