DOM操作無法立即執行

Question

我遇到過DOM瀏覽器在瀏覽器運行所有迭代時（即while，for，-loops）纔會生效的問題。

例子：

var text = document.getElementById("text"); 
 
for (var i = 0; i < 100000000; i++) { 
 
    if (i % 1000000 == 0) { 
 
    setTimeout(function() { 
 
     text.innerHTML += "|"; 
 
    }, 0); 
 
    } 
 
}

<p id="text"></p>

我希望看到一個進度十歲上下的行爲，而不是當他通過了環跑DOM只操縱。

我嘗試了setTimeout的異步方法，但沒有成功。

有沒有一個很好的方法來實現這一目標？

Answer 1

由於Javascript運行在一個單獨的線程，因此一切都被阻止，直到它完成處理計算。

爲了實現非阻塞計算，您可以使用webworkers並在工作人員調度postMessage事件時更新dom。

例子：

主要代碼：

var text = document.getElementById("text"); 
var myWorker = new Worker("js/forloop.js"); 
myWorker.postMessage(2000); 
myWorker.onmessage = function(e) { 
    //e.data is an object which is passed from the worker 
    if (e.data === true) 
     text.innerHTML += "|"; 
} 

WebWorker代碼：

onmessage = function(e) { 
    for (var i = 0; i < e.data; i++) { 
    postMessage(true); 
    } 
} 

延伸閱讀：Webworkers

Answer 2

更改超時從0到500，你會看到它的進展：

var text = document.getElementById("text"); 
 
for (var i = 0; i < 100000000; i++) { 
 
    if (i % 1000000 == 0) { 
 
    setTimeout(function() { 
 
     text.innerHTML += "|"; 
 
    }, 500); 
 
    } 
 
}

<p id="text"></p>

然而，該方案已完成計數到1億它進入閒置狀態前所處理第一個計時器。

---

這裏有一個替代方法，它不會佔用這麼多的計算機資源：

var text = document.getElementById("text"); 
 
for (var i = 0; i < 100; i++) { 
 
    setTimeout(function() { 
 
    text.innerHTML += "|"; 
 
    }, 10*i); 
 
}

<p id="text"></p>

Answer 3

而不是使用循環和setTimeout，使用類似的JavaScript工具setInterval。這將每N毫秒重複運行一個函數。您可以使用計數器變量來跟蹤何時添加進度條以及何時停止！ http://jsfiddle.net/4odd386e/

var text = document.getElementById("text"); 
var i = 0; 
function addOne() { 
    i += 1; 
    if (i % 10 === 0) { 
     text.innerHTML += "|"; 
    } 
    if (i === 1000) { 
     // Progress complete 
     clearInterval(initProgress); 
    } 
} 
var initProgress = setInterval(addOne, 0); 

而且，您最初使用的高數字是導致進展非常緩慢，所以我用10和1000作爲例子。此代碼可以使用更高的數字，但顯示結果需要很長時間。