Question

有没有办法强制浏览器在执行JavaScript期间呈现DOM更改？在以下示例中，只有＆＃39; 1000＆＃39;将显示，我明白这是由于只有一个线程处理JavaScript执行但我想知道是否有办法强制浏览器呈现每个DOM更改？

示例：

var el = document.getElementById("#fixup"),
   i;

for (i = 1; i <= 1000; i++) {
   // can i force this DOM update to the rendered?
   el.innerHTML = i.toString());
}

Answer 1

你可以用计时器来做。这是一个例子：

var el = document.getElementById("fixup");
var speed = 10;
for (var i = 1; i <= 1000; i++) {
  setTimeout(function(i) {
      el.innerHTML = i;
  }, speed * i, i);
}

<div id="fixup"></div>

可能不是最好的方法，但是从一开始就有1000个计时器有点可疑。

替代方案：

var el = document.getElementById("fixup");
var speed = 10, i = 0, limit = 1000;
  setTimeout(function loop() {
      el.innerHTML = i++;
      if(i <= limit){
        setTimeout(loop, speed);
        }
  }, speed);

<div id="fixup"></div>

如果你不关心渲染元素的速度，那么这将是最好的：

var el = document.getElementById("fixup");
var speed = 10, i = 0, limit = 1000;
  window.requestAnimationFrame(function loop() {
      el.innerHTML = i++;
      if(i <= limit){
        window.requestAnimationFrame(loop);
        }
  });

<div id="fixup"></div>

Answer 2

看看for性能测试 HERE ，您会发现for循环非常快，并且可以在~0.135中循环1000第二，所以如果要显示所有迭代，则必须使用setTimedout()来减慢操作。

Answer 3

如果你打电话

，你只支持chrome

alert("check the box to prevent these")

它会在每次调用时更新DOM，但是如果其他浏览器出现它可能会非常烦人

Answer 4

如果你想让DOM显示1-1000，那么每个循环创建一个div对象，并将appendChild（）添加到你的el。然后，您可以看到1- 1000而不是显示1000。

在forloop内部，

var newDiv = document.createElement("div");
newDiv.innerHTML = i;
el.appendChild(newDiv);

并且不在循环中。基本上，每次循环时，您都要创建一个新div，将值赋给（this）newDiv，并将其附加到父节点。我希望这会有所帮助。

我可以强制浏览器在javascript执行期间呈现DOM更改

4 个答案: