javascript - 具有 onclick 动画的多个按钮 - 某些按钮未完成 setTimeout

Question

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

不幸的是，当您快速单击按钮时，某些按钮不会经过 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)

    }
});

这也是代码笔。 https://codepen.io/anon/pen/ZqJxZd

谢谢!

Answer 1

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

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

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

}

并在函数 stOut(btn) 中调用函数toggleBtn，并将 btn 作为参数传递