javascript - jQuery append in loop - DOM does not update until the end

Question

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)?

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

Link to jsfiddle

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.

Answer 1

Most everything in the browser stops while a Javascript is running. This includes for example DOM rendering, event handling, image animation.

The only way to cause the DOM to be rendered is to end the Javascript. You can use the setTimeout method to start code again after the update:

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

Demo: http://jsfiddle.net/Uf4N6/