3

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.

Improve this question
2
  • can you use CSS powered animations ? Commented Jun 26, 2012 at 12:34
  • Would it be possible if I could. ? Commented Jun 26, 2012 at 21:04

2 Answers 2

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

My example might be a bit of becuse I build a SPA with a div that gets its data from knockout applybinding. Not just 10000 hellos :) So I cant see that I can batch it ? In my page the result in the incoming div is like another page. Do you think there is a solution for this.
@user1199595 that'll be tricky then - once the browser starts re-rendering the page because the layout is changing there's little or nothing you can do in the meantime. My main points still hold, though - JS isn't properly multithreaded (WebWorkers notwithstanding) and in particular everything that happens in the UI happens in a single thread. That thread will only do one thing at once.
Thanks for the help. I have to rethink the design i think.
0

For example you can use setTimeout 

$(document).ready(function () {

            $(".openWindow").click(function () {



                setTimeout(function() {

                var divToShow = $("#divDocument");

                var windowWidth = $(window).width();
                var leftOut = (windowWidth * -1);
                var leftIn = windowWidth + 500;

                divToShow.css({ left: leftIn });
                divToShow.show();
                divToShow.animate({ left: 0 }, 400, function () {
                    divToShow.addClass("visibleDiv");
                });


            }, 2000);



                for (var i = 0; i < 10000; i++) {
                    $("#divDocument").append("<div>hello</div>");
                } 


            });



        });

If you want to run animation after that elements was add you must create function for append elements and in end of this function call animation. If you want run this as async you must use setTimeout(func, 0) for animation and for elements add.

Improve this answer

5 Comments

how's that helping? You're just deferring the animation and not adding any elements.
you can move code for adding elemnt from timeout function and all will be work
no, that still won't work. The OP's point is that he wants the effect to be as if the DOM additions and the animation were happening at the same time. All yours has done is delay the entire animation by two seconds, which is actually worse than adding the elements and then starting the animation immediately.
ok, you can create function for append elements and run animation in end of this function. function createEl(callback) { //code for create elements\n callback(); } createEl(function() { //call animation here })
if you want to run this async you in all case must use setTimeout(func, 0). And this is will work like async

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.