jQuery的“append”操作在循环中即时渲染

最新推荐文章于 2024-07-26 03:26:06 发布

不爱运动的Pluto

最新推荐文章于 2024-07-26 03:26:06 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Html 文章标签： Javascript jquery for 即时渲染

本文链接：https://blog.youkuaiyun.com/ALaDingPro/article/details/88689929

JavaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

Html

6 篇文章

订阅专栏

博客指出在循环中用“append”动态添加标签或内容时，循环结束才统一渲染。原因是Javascript运行时，浏览器多数内容停止，结束Javascript运行才能使DOM呈现。解决方法是用setTimeout方法替代循环，更新后重启代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述

在循环中使用“append”动态添加标签或内容时，只有当循环结束时，才会统一将添加的内容渲染出来。如下代码所示：

for (i=0; i<5000; i++) {
    $('#collection').append('<li>Line Item</li>');
}

以上代码只有当循环结束后，才会在页面上添加内容。

原因

当Javascript运行时，浏览器中的大多数内容都会停止。这包括例如DOM渲染、事件处理、图像动画。

使DOM呈现的唯一方法是结束Javascript运行。

解决方法

使用setTimeout方法替代循环，在更新之后重新启动代码。

var  i = 0;

function appendSomeItems() {
  for (var j=0; j<50; i++, j++) {
    $('#collection').append('<li>Line Item</li>');
  }
  if (i < 5000) window.setTimeout(appendSomeItems, 0);
}

appendSomeItems();

如果想一行行实时显示，可参考以下代码：

var  i = 0;

function appendSomeItems() {
  $('#collection').append('<li>Line Item</li>');
  i++;
  if (i < 5000) window.setTimeout(appendSomeItems, 0);
}

appendSomeItems();