Chaining jQuery animations using recursion crashes browser

Question

Here's the basic idea of what I'm trying to do:

1. Set the innerHTML of a DIV to some value X
2. Animate the DIV
3. When the animation finishes, change the value of X and repeat N times

If I do this in a loop, what ends up happening is, because the animations occur asynchronously, the loop finishes and the DIV is set to its final value before the animations have had a chance to run for each value of X.

As this question notes, the best way to solve this problem is to make a recursive call to the function in the callback handler for the animation. This way the value of the DIV doesn't change until the animation of the previous value is complete.

This works perfectly...to a point. If I animate a bunch of these DIVs at the same time, my browser gets overwhelmed and crashes. Too much recursion.

Can anyone think of a way to do this without using recursion?

EDIT:

Here's my code:

• Recursion: http://jsfiddle.net/W7aFm/
• setInterval: http://jsfiddle.net/2HYYm/

Answer 1

Using setInterval, you should be able to do something like the following. There's no recursion taking place at all. (Of course, this example is contrived, but should explain the concept.)

Working example: http://jsfiddle.net/TNwAZ/1/

HTML

<div id='myDiv' style="position:relative">div</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript

var count = 10;
var duration = 500;

var interval = setInterval(function() { 
                                 $('#myDiv').text(count).animate({left: '+=50'},duration);
                                 count--;      // Decrement count
                                 if(!count) { clearTimeout(interval) }
                           }, duration );​

---

EDIT:

Not sure how you are getting the elements to animate, but here's an example of placing references to them in an array, and looping over that.

http://jsfiddle.net/TNwAZ/3/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>

Javascript

var divArray = ['myDiv1','myDiv2','myDiv3'];

for(var i in divArray) {
    intervalAnimate(divArray[i]);
}

function intervalAnimate(theDiv) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $('#' + theDiv).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}

---

EDIT:

This version skips the for loop, and just gets a collection of jQuery objects, and passes that in.

http://jsfiddle.net/TNwAZ/5/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>​

Javascript

var $divs = $('div[id^=myDiv]');

intervalAnimate($divs);

function intervalAnimate(collection) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $(collection).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}

Answer 2

I haven't tested this code, but have you tried something like:

var x = ["one", "two", "three"];
function animate(e, init){
    e.data("index", (init ? 0 : e.data("index") + 1));
    e.html(x[e.data("index")]);
    e.animate({ key: val }, { duration: 500, complete: function(){
        if ($(this).data("index") < x.length - 1) {
            animate($(this));
        }
    }});
}
$(".toAnimate").each(function(){
    animate($(this), true);
});

Granted, there is recursion, but maybe none of the kind you're hoping to eliminate? It might end up being something that's limited by the browser, unfortunately. (Although, I can't think of why having a longer .queue("fx")would itself affect performance.)

Also there could be different x values for each .toAnimate if you set it up (x) using an indexed object.

Answer 3

Setup an end of animation function. If you want to execute 'N' animations create an array and add 'N' elements to it. Each time you execute the end of animation function slice() off one of the array elements. When it's empty then you're done, otherwise start the next animation.