如何渲染密集任務內的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更改？

回答

相關問題