类按钮超时

Question

所以我有一个类，它有一些使轮播工作的功能。但是快速按下一个按钮会删除上一个动画并开始下一个动画，所以我想让按钮等待动画结束。css 中的动画是 0.6 秒，但是当我快速单击按钮时，我在 goNext 函数中设置的时间被完全忽略。我在这里做错了什么？索引.js

let carousel = document.getElementById("carousel");
let seats = document.querySelectorAll("ul > li");
if (seats.length === 1)
  carousel.style.left = 0;
class SLID {
  constructor() {
    this.nextDisable = true;
    this.changeNextDisable = this.changeNextDisable.bind(this);
  }
  changeNextDisable() {
    this.nextDisable = false;
  }
  goToNext() {
   if(this.nextDisable===false){
    this.nextDisable = true;
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.nextElementSibling || seats[0];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toPrev');
    carousel.classList.add('toNext');
    carousel.classList.remove('is-set');
    return setTimeout(()=> {
        this.changeNextDisable();
        carousel.classList.add('is-set');
    }, 60);
  }
  goToPrev() {
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.previousElementSibling || seats[seats.length - 1];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toNext');
    carousel.classList.add('toPrev');
    carousel.classList.remove('is-set');
    return setTimeout((function () {
      return carousel.classList.add('is-set');
    }), 50);
  }
}
}
let s = new SLID();
document.getElementById("nextButton").addEventListener("click", () => {
  s.goToNext();
});
document.getElementById("prevButton").addEventListener("click", () => {
  s.goToPrev();
});

Answer 1

根据您的动画类型（transition或animation），您可以替换

return setTimeout(()=> {
    this.changeNextDisable();
    carousel.classList.add('is-set');
}, 60);

（并尽量避免它）以：

carousel.addEventListener("animationend", () => {
    this.changeNextDisable();
    carousel.classList.add('is-set');
}, {
    once: true,
});

或

carousel.addEventListener("transitionend", () => {
    this.changeNextDisable();
    carousel.classList.add('is-set');
}, {
    once: true,
});

goToPrev方法也是如此。

Answer 2

您告诉我们 CSS 动画的持续时间为 0.6 秒，即 600 毫秒，而不是 60 或 50 毫秒，这是您设置的setTimeout延迟。

所以：

return setTimeout(()=> {
    this.changeNextDisable();
    carousel.classList.add('is-set');
}, 600);
// ^^^^

话虽如此，您应该考虑收听transactionend事件，因为这样您就不需要知道 CSS 过渡需要多长时间。

那看起来像这样：

const done = () => {
    carousel.removeEventListener("transactionend", done);
    this.changeNextDisable();
    carousel.classList.add('is-set');
}
return carousel.addEventListener("transactionend", done);