javascript - 在每次迭代时向 DOM 添加一个元素,而不是全部在循环结束时

标签 javascript html loops dom

我不是纯粹的前端开发人员,我想知道为什么在每次迭代都会将元素添加到 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/

相关文章:

python - 在列表中第一个传递条件的元素后面添加一个元素

javascript - js中什么时候应该把var放在function前面?

javascript - 在javascript中获取通用时区?

html - CSS 下拉菜单 - 超时

c# - 从搜索满足条件的 xy 点列表中获得 3 个结果 c#

JavaScript 数学,循环内循环

javascript - 客户端类似 Mongoose 的模式定义

javascript - 使用函数设置变量值的单行代码,如果为假则抛出异常

html - 如何用CSS剪掉字体字符的空白部分

javascript - 多次更改按钮上的文本并使用 JQuery 移动 div