有没有一种方法可以强制浏览器在执行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());
}
您可以使用计时器。这是一个例子：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句