jQuery追加循环 – DOM直到最后才更新

循环遍历大型集合并将其附加到DOM时，DOM仅在追加所有项目后刷新。 为什么在每次append()调用后DOM都不会更新？ 我可以强制DOM在每次追加后刷新（或者可能在每n次追加后）？

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

链接到jsfiddle

注意：我理解通过将所有元素附加到局部变量，然后将该变量附加到DOM，可以实现更好的性能（避免DOM重排）。 但我希望前n个元素在屏幕上呈现，然后是下一个n等，直到呈现所有元素。

Answer 1

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

导致DOM呈现的唯一方法是结束Javascript。 您可以使用setTimeout方法在更新后再次启动代码：

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

演示： http ： //jsfiddle.net/Uf4N6/

Answer 2

您需要每隔一段时间将控制权交还给浏览器：

  var current = 0 function draw() { var next = current + 10 for(var i = current; i < next; i++) { $('#collection').append('
Line Item
'); } current = next setTimeout(draw, 50); } draw(); 

Answer 3

一般情况下，请不要多次触摸DOM。 你已经观察到它是一种性能杀手。

 var result=""; for (i=0; i<5000; i++) { result+='
Line Item
'; } $('#collection').append(result); 

这样，您只需触摸一次DOM！

另一种方法是使用数组。

 var result=[]; for (i=0; i<5000; i++) { result.push('
Line Item
'); } $('#collection').append(result.join("")); 

Answer 4

如果这真的是你想做的……

 var i = 0; for (i=0; i<5000; i++) { setTimeout(function() { $('#collection').append('
Line Item
'); }, 0); }