Javascript 单击按钮时在setTimeout内重置setInterval

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

我有两个按钮在角色之间循环，角色根据当前状态依次拥有不同的动画。因此，当我单击按钮时，我想：

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

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

我尝试过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

内的interval谢谢，我想我也通过创建setTimeout的引用解决了这个问题，并在单击按钮时清除间隔和超时：）如果您能够解决问题，请考虑添加答案。。