Javascript 具有onclick动画的多个按钮-某些按钮未完成设置超时

我有三个带有不同onclick动画的按钮。单击后，它会添加“active”类以启动CSS动画。使用setTimeout，它会删除该类以删除动画的最终状态，因此可以再次单击按钮

但不幸的是，当您快速单击按钮时，某些按钮没有通过设置超时

不确定到底发生了什么，但这是我的js

var i=0;
$('button').each(function(){
    i++;
    $('.btn-' + i).on('click', toggleBtn);

    function toggleBtn() {
      btn = this;
      // btn = btn.querySelector(".btn-" + i);
      btn.classList.add('active');

       setTimeout(function () {
          btn.classList.remove('active');
      }, 3000)

    }
});

这是密码笔。

---

谢谢

每次单击不同的按钮时，都会丢失setTimeout引用

一种解决方案是将setTimeout放入一个外部函数中，如下所示：

function stOut(btn) {
setTimeout(function () {
    btn.classList.remove('active');
}, 3000)

}

---

并在其函数stOut（btn）内调用函数toggleBtn，并将btn作为参数传递

谢谢，Henrique！我在codepen中更新了代码，现在看起来它工作正常。谢谢你！