我不是纯粹的前端开发人员,我想知道为什么在每次迭代都会将元素添加到 DOM 的循环中,生成的 DOM 仅在循环结束时可见,而不是渐进可见。
<html>
<body>
<div id="body"></div>
</body>
<script>
for(var i = 0; i < 1000000; i++){
document.getElementById('body').appendChild(document.createElement('br'));
document.getElementById('body').appendChild(document.createTextNode(i));
}
</script>
</html>
最佳答案
Javascript 在处理重绘事件之前运行代码直至完成。因此,为了定期更新显示,您需要定期结束脚本执行并在事件队列中放置一些内容,以回调您的函数以进一步处理。
例如,您可以使用 setTimeout
执行此操作:
(function loop(i) {
if (i > 10000) return; // end condition
document.body.appendChild(document.createElement('br'));
document.body.appendChild(document.createTextNode(i));
void document.body.offsetWidth;
setTimeout(loop.bind(null, i+1), 0);
})(0);
关于javascript - 在每次迭代时向 DOM 添加一个元素,而不是全部在循环结束时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40311740/