5

有没有办法强制浏览器在 JavaScript 执行期间呈现 DOM 更改？在下面的示例中，只会显示“1000”，我知道这是由于只有一个线程处理 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());
}
4

4 回答 4

5

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

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>

于 2015-11-12T23:00:05.527 回答
0

如果你只支持 chrome 如果你打电话

alert("check the box to prevent these")

每次调用它都会更新 DOM 但如果其他浏览器出现它可能会很烦人

于 2015-11-12T23:01:46.723 回答
0

如果您尝试让 DOM 显示 1-1000，则在每个循环中创建一个 div 对象并将 appendChild() 到您的 el。然后，您可以看到 1-1000，而不是显示 1000。

在forloop内部，

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

并且在循环之外。基本上，每次循环时，您都会创建一个新 div，将值分配给 (this) newDiv，并将其附加到父节点。我希望这会有所帮助。

于 2015-11-12T23:02:23.827 回答
-1

看看这里for的性能测试，你会发现循环非常快，它可以在 ~0.135 秒内循环 1000 次，所以如果你想显示所有迭代，你必须使用它来减慢操作。forsetTimedout()

于 2015-11-12T22:57:35.823 回答