Chaining jQuery animations using recursion crashes browser
Posted
by Rob Sobers
on Stack Overflow
See other posts from Stack Overflow
or by Rob Sobers
Published on 2010-05-03T22:25:13Z
Indexed on
2010/05/03
22:28 UTC
Read the original article
Hit count: 265
Here's the basic idea of what I'm trying to do:
- Set the innerHTML of a DIV to some value X
- Animate the DIV
- 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?
© Stack Overflow or respective owner
