DOM操作无法立即执行

Question

我遇到了一个问题，即DOM操作仅在浏览器执行所有迭代（即for循环）时才生效。

例：

 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> 

我希望看到一个带有进度条的行为，相反，只有当他通过for循环时，才对DOM进行操作。

我尝试了setTimeout的异步方法，但没有成功。

是否有实现此目标的好方法？

Answer 1

代替使用循环和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为例。 该代码将使用更高的数字，但是显示结果将花费很长时间。

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

由于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