如何在密集任务中渲染 DOM 更改？

Question

我正在运行O(N^4) 任务。不谈论细节 - 我想在第一个循环中更新 DOM。 伪代码是这样的：

for (var a = 0; a < lim; a++) {
  updateDOM();

  for (var a = 0; a < lim; a++) {
    for (var a = 0; a < lim; a++) {
      for (var a = 0; a < lim; a++) {
        ...
      }
    }
  }
}

现在的问题是 updateDOM() 被调用但从未呈现适当的 DOM 更改。所有计算都需要几秒钟。

我的解决方案：

• 使用网络工作者
• 设置超时

我没有测试过它们中的任何一个，但怀疑它们是否能解决问题。在这种情况下，我将不胜感激。

Answer 1

两者都应该解决问题。问题是只要脚本正在运行，浏览器中就不会发生任何其他事情。在您的函数结束之前，浏览器不会显示任何更新。

使用setTimeout，您只需退出您的功能，让浏览器显示更新，然后让超时重新启动您的功能，以便您可以从中断处继续。

例子：

function loop(a) {
    for (var b = 0; b < 10000000; b++) {}
    $('div').text(a);
    a++;
    if (a < 1000) {
        window.setTimeout(function(){ loop(a); }, 0);
    }
}

loop(0);

演示：http://jsfiddle.net/Guffa/47FMM/