I’m having an interesting but difficult problem with my JavaScript code. Basically, I’m trying to create an animation of a simple algorithm using JavaScript (a sorting algorithm, if you’re wondering) for educational reasons. I’ve already got all of the animation code written (using RaphaelJS), and it all works fine. The trouble is getting the animations of the algorithm to happen at the right time. JavaScript doesn’t really have any way to “pause” execution, so I can’t really step through the algorithm slowly, playing animations at each step. It’s obviously much more valuable from an educational perspective if the algorithm proceeds at a pace the student can comprehend.
There are two ways to solve this problem that I can think of, and both suck. The first is to use some crazy setTimeout() code. This would probably be very difficult — lots of strange code transformations would be needed to associate the different parts of the algorithm with correct timeouts. I’ve already tried to do this a little bit, and it gets very complicated for a non-trivial algorithm.
The second is to busy-wait. This would probably also work. The problem is that busy waiting is a pretty bad idea in JavaScript code — I actually crashed Firefox when I was testing out this alternative. Basically, I’m wondering if there’s another solution here that I’m overlooking. Bonus points if the solution is client-side only, since the amount of freedom I have to serve stuff other than static html and javascript on the school server is questionable.
What about using links/buttons e.g. < > to allow the user to step through the code by clicking prev/next?
Maybe the only viable workaround and may make more sense for the end user.