jQuery追加循环 - DOM直到最后才更新答案

【问题标题】：jQuery append in loop - DOM does not update until the endjQuery追加循环 - DOM直到最后才更新
【发布时间】：2013-09-27 19:43:21
【问题描述】：

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

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

Link to jsfiddle

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

【问题讨论】：

我认为确实如此，但我认为它会在执行大循环时冻结 UI，因此它似乎一次完成了所有操作，但事实并非如此。

标签： javascript jquery dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

    var current = 0


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

draw();

【讨论】：

【解决方案3】：

一般来说，请不要触摸 DOM 太多次。正如您已经观察到的那样，它是性能杀手。

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

这样，你只接触 DOM 一次！

另一种方法是使用数组。

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

【讨论】：

注意：我知道通过将所有元素附加到局部变量，然后将该变量附加到 DOM 可以实现更好的性能（避免 DOM 重排）。但我希望前 n 个元素在屏幕上呈现，然后是下一个 n，等等，直到所有元素都被呈现。
哦，是的。抱歉，我没有满足您的需求。

【解决方案4】：

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

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

【讨论】：