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?