为代码动画暂停JavaScript执行

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

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

其次是忙等待。这可能也会起作用。问题在于，在JavaScript代码中忙碌的等待是一个非常糟糕的主意 - 当我测试这个替代方案时，我确实崩溃了Firefox。基本上，我想知道是否有另一个解决方案，我忽略了。如果解决方案只是客户端，奖励点数，因为我必须在学校服务器上提供除静态html和javascript以外的其他东西的自由度是有问题的。

来源

2009-12-08 spitfire

我倾向于认为有一个可行的解决方案使用'setTimeout（）'或'setInterval（）'，但当然我不知道没有看到一些代码。你是一个JS程序员有多好？你知道如何将闭包传递给'setTimeout（）'吗？它们可能有助于将当前状态转移到算法的下一步。 – 2009-12-08 07:16:22

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

如何使用链接/按钮例如<>允许用户单击prev/next单步执行代码？

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

来源

2009-12-08 07:15:13 Rippo

您可以将此方法与'setInterval（）'结合使用来调用与下一个按钮关联的函数以自动播放动画。 – 2009-12-08 07:33:29

也许这样做太简单了，不能做你想做的事情，但是如果你把你想要在stop之间运行的代码段放到一个函数中，并且通过按下/单击一个按钮来调用该函数在页面上：onclick="runAnimationPiece()"

你的代码需要保持一些状态，以知道它从上次函数运行时的位置。

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

来源

2009-12-08 07:26:19 Roman

为代码动画暂停JavaScript执行

回答

相关问题