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();