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

简述

在循环中使用“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();