Javascript反转动画无法正常工作

Question

我想要实现的目标：启动动画，然后在需要时立即将其反转。反过来可以在循环内的任何地方工作。我在div中为文本的各个字符设置动画（每个字母在他们自己的范围内（c））。

我的问题：我似乎低估了我的概念。我无法按照自己的意愿进行反向工作。它确实反转但仅在某个不需要的条件下：它必须在增量循环结束之前反转（索引11）。将反向函数调用的超时设置为2000，然后使用3000进行尝试。反向使用第一个而不是后者。

我尝试了什么：我在console.log很多东西，以确保一切正常。不幸的是我收到一个错误： 未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的。一旦我的反向开始，它就会开火。这当然对我没有意义，因为我的dom元素应该被定义，无论是递增还是递减索引＆＃34; i＆＃34;，都应该保留定义。除此之外，我一直在尝试各种结构变化，希望有所改进。

Jsfiddle演示： http://jsfiddle.net/9cm3Lwem/6/

找到以下代码：

setTimeout(function() {
    text.reverse();
   }, 3000)

尝试使用2000（在动画期间反向）和3000（让动画在反转之前完成）并观察更改。

我的问题：为什么我的反面工作不正常，为了以优雅的方式解决这个问题，我该怎么做？

Answer 1

我在jsFiddle中查看了你的代码。您的“反向”功能会更改“状态”变量，但不会导致“播放”功能再次运行。因此，如果您在显示3000毫秒后调用反向运行代码，则只更改状态变量。你需要这样做才能再次调用play函数，如果它还没有在计时器上。