单击按钮时在 setTimeout 内重置 setInterval答案

【问题标题】：Reset setInterval within setTimeout at click of button单击按钮时在 setTimeout 内重置 setInterval
【发布时间】：2020-06-01 09:17:03
【问题描述】：

我目前正在研究一个使用过渡的动画项目，但我遇到了一个看起来很简单的问题，但我完全迷失了。

我有两个按钮可以在角色之间循环，这些按钮又根据当前状态有不同的动画。所以当我点击我想要的按钮时：

删除所有当前类
添加特定标识类
等待两秒钟，然后将“run-animation”添加到识别类
运行“状态”函数以在“运行动画”类的状态之间循环

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

我尝试了 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)
 }

【问题讨论】：

在全局变量中使用setInterval的引用，然后用它来清除setTimeout中的区间
谢谢，我想我通过创建对 setTimeout 的引用来解决它，并在单击按钮时清除 Interval 和 Timeout :)
如果您能够解决问题，请考虑添加答案..

标签： javascript settimeout setinterval

【解决方案1】：

通过在单击按钮时清除的全局变量中添加对所有间隔和超时（包括状态函数中的那些）的引用来“解决”问题。凌乱的代码，可能不是最佳解决方案，但至少现在可以。

【讨论】：