javascript thread

Question

http://jsfiddle.net/andersb79/SNTb3/1/

In this example when you click run. The div is animated in after it got its 1000 hellos. If i comment the for loop in the beginning out and comment in the other for loop the animation starts before the append is running.

But then the animation is not running smooth. Can you in some way make this happend or is it impossible in javascript.

I want it to load up the divDocument in the meantime it is animated in. I dont mean it should be live adding but I dont want it to mess upp the animation and I dont want to loose time by adding the 1000 records before the animation is started.

Hope that you understand my qustion.

Answer 1

If you're going to add 10000 elements in one go it will block any other activity until it has finished.

If you start the animation and then do the add, it's jerky because for a short while the system is busy adding the divs, and then suddenly it realises that it's running behind on the animation and it has to rush to catch up. Note that the animation does not get interleaved with the addition of the elements.

The best way to solve this is to add the elements in batches, using setTimeout to trigger the next batch each time.

The batching gives the background thread time to run any other events, such as the animation handlers.

See http://jsfiddle.net/alnitak/yETt3/ for a working demo using batching. The core of the sample is this:

    var n = 0,
        batch = 100;

    function nextBatch() {
        for (var i = 0; i < batch && n < 10000; ++i, ++n) {
            $("#divDocument").append("<div>hello</div>");
        }
        if (n < 10000) {
            setTimeout(nextBatch, 0);
        }
    }

    setTimeout(nextBatch, 0);

which adds elements 100 at a time, with the setTimeout call allowing the event handling thread to jump in and process animations and other UI events.