按下按钮在setInterval内重置setTimeout

Question

目前，我正在使用转换来处理一个动画项目，但我遇到了一个看似如此简单的问题，但我完全迷失了方向。

我有两个按钮要循环字符之间，他们反过来有不同的动画基于当前的状态。因此，当我单击按钮时，我想：

• 删除所有当前类
• 添加特定的标识类
• 等两秒钟，然后将“运行动画”添加到标识类
• 运行状态“-function”以在“运行动画”类

的状态之间循环。

我的问题是，我不能让它从一开始就运行每次。例如，动画第一次运行时，它会从上到下运行。但是，如果我点击按钮来切换字符，在添加“运行动画”之后，它可能会直接跳转到例如“state-3”。我需要一种方式，“重置”“状态”，每次我点击按钮，以切换字符。另外，有时状态类会重叠，例如添加“state-2”和“state-3”。

我尝试过不同的clearInterval()、clearTimeout()等方法，但都没有成功。

下面是我当前运行的按钮和函数的代码。

 $("#button").click(function () {
    $("#character").removeClass();
    $("#character").addClass("exampleCharacter");
    setTimeout(function () {
      $("#character").addClass("run-animation");
      state(".run-animation");
    }, 2000);
  });

 function state(e) {
   setInterval(function() {
     $(e).removeClass("state-four");
     setTimeout(function () {
       $(e).addClass("state-two");
     }, 1000);
     setTimeout(function () {
       $(e).removeClass("state-two");
       $(e).addClass("state-three");
     }, 2000);
     setTimeout(function () {
       $(e).removeClass("state-three");
       $(e).addClass("state-four");
     }, 3000);
   }, 4000)
 }

Answer 1

通过添加对全局变量中的所有间隔和超时(包括状态函数中的间隔和超时)的引用，“解决”了这个问题。混乱的代码，可能不是最优的解决方案，但至少目前是可行的。