Render Html Immediately After Jquery Append

I have a loop look like this for(i = 0; i < 50000; i++){ $('body').append('

lol

'); } In Opera Browser I can See the element div with content 'lol' be

Solution 1:

First of all, this is really bad practice. Each append forces a relayout and eats performance like cake.

That said, running a loop stalls UI updates. So just use an "async loop", a self referencing function with a timeout call to allow the UI to refresh.

var i = 5000;
var countdown = function () {
    $("body").append("<div></div>");
    if (i > 0) {
        i--;
        window.setTimeout(countdown, 0);
    }
}
countdown();

Edit: Added the actual function call.

Solution 2:

use a recursive function with a setTimeout. The setTimeout lets the browser update the UI between DOM updates.

functionappendDiv(iteration, iterationLimit) {
   $('body').append('<div></div>');
   if(iteration <= iterationLimit) {
      window.setTimeout(appendDiv, 1, iteration + 1, iterationLimit);
   }
}