暂停JavaScript执行代码动画

Question

我的JavaScript代码有一个有趣但很难的问题。基本上，出于教育原因，我正在尝试使用JavaScript（排序算法，如果你想知道）创建一个简单算法的动画。我已经编写了所有动画代码（使用RaphaelJS），一切正常。麻烦的是让算法的动画在正确的时间发生。 JavaScript实际上没有任何方法可以“暂停”执行，所以我无法真正慢慢地逐步完成算法，在每一步都播放动画。如果算法以学生可以理解的速度进行，那么从教育的角度来看，这显然更有价值。

有两种方法可以解决我能想到的问题，而且都很糟糕。首先是使用一些疯狂的setTimeout（）代码。这可能会非常困难 - 需要进行大量奇怪的代码转换才能将算法的不同部分与正确的超时相关联。我已经尝试过这样做了，对于一个非平凡的算法来说它变得非常复杂。

第二是忙碌等待。这可能也会奏效。问题是忙碌的等待在JavaScript代码中是一个非常糟糕的主意 - 当我测试这个替代方案时，我实际上崩溃了Firefox。基本上，我想知道我在这里是否有另一种解决方案。如果解决方案仅在客户端，奖励积分，因为我必须提供除学校服务器上的静态html和javascript之外的东西的自由度是值得怀疑的。

Answer 1

  

如果算法以学生可以理解的速度进行，那么从教育的角度来看显然更有价值。

如何使用链接/按钮，例如＆LT; ＆GT;允许用户通过单击上一个/下一个来单步执行代码？

也许唯一可行的解​​决方法可能对最终用户更有意义。

Answer 2

也许这太简单了，无法做你想做的事情，但如果你把你想在停靠点之间运行的代码段放到一个函数中，并通过按下/单击按钮来调用该函数，该怎么办？页面：onclick="runAnimationPiece()"

您的代码需要保留一些状态才能知道上次函数运行时它从哪里停止。

如果你需要为动画的不同部分运行不同的函数，比如说，第一部分应该由foo1（）生成，第二部分应该由foo2（）生成，你可以创建一个计数器和一个函数根据计数器调用适当的动画函数（foo1（）或foo2（）等）。