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

Question

有没有办法强制浏览器在执行 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());
}

Answer 1

看看 for 性能测试 HERE 你会发现 for 循环真的很快而且它可以在 ~0.135 秒内循环 1000，所以如果你想显示所有迭代，你必须使用 setTimedout() 来减慢操作。

Answer 2

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

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 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 更改吗

Can I force the browser to render DOM changes during javascript execution

javascript

browser

render

single-threaded