Question

我有三个具有不同onclick动画的按钮。单击时，它将添加“活动”类以启动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)

    }
});

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

谢谢！

Answer 1

每次单击其他按钮时，都会丢失setTimeout参考。

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

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

}

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

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

1 个答案: