CODEWITHSUNDEEP
javascriptoptimization
iveqy
iveqy

Reputation: 24331

Force begin rendering with javascript

I've an ajax-call that will give me a 500 row return. Each row will create a HTML-object that will be added to the DOM. This all works fine, but it's slow.

I would like to add 20, then render what is done, and then continue to add the last 480. However, I can't figure out how to force rendering.

The code is something like this:

for (i = 0; i < 500; i += 1) {
     $(newdata[i]).insertAfter('#object');
}

Where newdata is a textstring, for example

"<p>hello world</p>"

Edit

I might have left out some critical information in my post. The nodes are not to be inserted in order. It's a tree and each node has a parent that I know about. And each parent is garanteed to be inserted before the node. So I can't just append nodes after eachother since they might be in different branches.

Upvotes: 1

Views: 34

Answers (2)

Paul Roub
Paul Roub

Reputation: 36438

Give the rendering code time to run. Write a few rows, call setInterval() to let other code run, and continue:

function renderLines(newdata) {
  var len = newdata.length;
  var sofar = 0;
  var obj = $('#object');

  var renderSome = function() {
    for ( var i = 0; (i < 20) && ((i + sofar) < len); ++i )
    {
      $(newdata[i + sofar]).insertAfter(obj);
    }

    sofar += 20;

    if (sofar < len)
      setTimeout(renderSome, 10);
  };

  setTimeout(renderSome, 10);
}

Upvotes: 0

adeneo
adeneo

Reputation: 318232

Stop inserting one node at the time, insert collections of nodes instead.
It's not the loop that's slow, it's DOM manipulation that is slow, and inserting 500 DOM nodes one node at the time will be slow.

var nodes = $();

for (i = 0; i < 20; i++) {
    nodes.append(newdata[i])
}

$('#object').after(nodes);

var more_nodes = $();

for (i = 20; i < 500; i++) {
    more_nodes.append(newdata[i])
}

$('#object').after(more_nodes);

If you do it like this, it will probably be ten times faster, and you don't have to insert 20, then 480 etc.

Upvotes: 1

Related Questions