如何渲染密集任务内的DOM更改？

我正在运行O(N^4)任务。不是在谈论细节 - 我想在第一个循环内更新DOM。该伪是这样的：如何渲染密集任务内的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()叫，但从来没有呈现apropriate DOM变化。所有的计算都需要几秒钟。

我的解决方案：

利用网络工作者
的setTimeout

我没有测试过任何人，但怀疑他们会解决这个问题。在此情况下，我将不胜感激。

来源

2013-12-14 lukas.pukenis

嗯。为什么你为所有的循环使用相同的变量？这不会导致不良行为或无限循环吗？ – scrblnrd3

这只是一个演示伪代码。那就是为什么 –

要么应该解决这个问题。问题是，只要脚本正在运行，浏览器中就不会发生任何其他事情。在你的功能结束之前，浏览器根本不会显示任何更新。

使用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/

来源

2013-12-14 21:18:01 Guffa

谢谢。可能会执行这个方法 –

也可以详细说一下吗？浏览器在循环中暂停DOM呈现还是什么？或者它在cpu或某物上有门槛？ –

@ lukas.pukenis：Javascript是严格单线程的（除了后台工作者）。只要脚本正在运行，浏览器界面中就不会发生任何事情。没有事件处理，页面不更新，甚至动画GIF动画。 – Guffa

如何渲染密集任务内的DOM更改？

回答

相关问题