Несколько кнопок с анимацией по клику - некоторые не заканчивают setTimeout

Question

У меня есть три кнопки с разными анимациями.При нажатии он добавляет «активный» класс для запуска 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)

}

и вызывает функцию toggleBtn внутри своей функции stOut (btn) и передает btn в качестве параметра