javascript jQuery 追加循环 - DOM 直到最后才会更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19058858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery append in loop - DOM does not update until the end
提问by Domenic
When looping over a large collection and appending it to the DOM, the DOM only refreshes after all items have been appended. Why doesn't the DOM update after each append()call? Can I force the DOM to refresh after each append (or maybe after each n number of appends)?
当循环一个大型集合并将其附加到 DOM 时，DOM 仅在所有项目都已附加后刷新。为什么每次append()调用后 DOM 都不更新？我可以在每次追加后（或者每 n 次追加后）强制刷新 DOM 吗？
var i = 0;
for (i=0; i<5000; i++) {
$('#collection').append('<li>Line Item</li>');
}
NOTE: I understand that better performance (avoiding DOM reflow) can be achieved by appending all elements to a local variable, and then appending that variable to the DOM. But I want the first n elements to render on the screen, then the next n, etc. until all elements are rendered.
注意：我知道通过将所有元素附加到局部变量，然后将该变量附加到 DOM 可以实现更好的性能（避免 DOM 重排）。但我希望前 n 个元素在屏幕上呈现，然后是下 n 个元素，依此类推，直到所有元素都被呈现。
采纳答案by Guffa
Most everything in the browser stops while a Javascript is running. This includes for example DOM rendering, event handling, image animation.
当 Javascript 运行时，浏览器中的大部分内容都会停止。这包括例如 DOM 渲染、事件处理、图像动画。
The only way to cause the DOM to be rendered is to end the Javascript. You can use the setTimeoutmethod to start code again after the update:
导致 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();
回答by Nicolás Straub
you need to give back control to the browser every once in a while:
您需要每隔一段时间将控制权交还给浏览器：
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();
回答by Blaise
Generally, please don't touch DOM too many times. It is a performance killer as you have already observed.
一般来说，请不要过多地接触DOM。正如您已经观察到的那样，它是一个性能杀手。
var result="";
for (i=0; i<5000; i++) {
result+='<li>Line Item</li>';
}
$('#collection').append(result);
In this way, you touch DOM only once!
这样，你只接触 DOM 一次！
An alternative way is using array.
另一种方法是使用数组。
var result=[];
for (i=0; i<5000; i++) {
result.push('<li>Line Item</li>');
}
$('#collection').append(result.join(""));
回答by Brian
If that's really what you want to do...
如果那真的是你想做的...
var i = 0;
for (i=0; i<5000; i++) {
setTimeout(function() {
$('#collection').append('<li>Line Item</li>');
}, 0);
}
