Как бы я временно отключил событие в простом JavaScript?

Question

Я делаю свою собственную систему слайдеров с простым JavaScript.Проблема заключается в том, что каждый раз, когда я повторяю touch-starting до завершения анимации, событие и анимация переопределяются следующим образом:

Я ожидаю избавиться от переопределения и временно отключить touchevents до тех пор, пока не закончится анимация CSS (добавление, удаление классов CSS с помощью .classList в JS).

Я пыталсярешить эту проблему самостоятельно, но понятия не имею, как бы я это сделал.

Я прилагаю базовую структуру кода, которую я использовал в GIF выше, максимально упрощая.Пожалуйста, извините, что не удалось загрузить полный код в этом фрагменте, потому что вопрос будет слишком длинным и нечитаемым:

'use strict';
(function () {
  function Card($el) {
    this.$el = $el;
    this.$el.addEventListener('touchstart', (e) => this.start(e));
    this.$el.addEventListener('touchmove', (e) => this.move(e));
    this.$el.addEventListener('touchend', (e) => this.end(e));
  }
  Card.prototype = {
    start: function(e) {
      this.active = false;
      this.coordX = e.touches[0].clientX;
      this.coordY = e.touches[0].clientY;
    },
    move: function(e) {
      this.active = true;
      var x = e.touches[0].clientX,
          y = e.touches[0].clientY,
          dist = Math.sqrt(x + this.coordX);
    },
    end: function(e) {
      let distAmount = e.changedTouches[0].clientX - this.coordX;
      if (distAmount > 200) {
        this.create(this.direction * -1, this.swipe);
      } else if (distAmount < -200) {
        this.create(this.direction, this.swipe);
      }
    },
    create: function(direction, callback) {
      let bound = callback.bind(this);
      console.log(`Disable the whole events (touchstart, move, end)`);
      setTimeout(bound, 100, direction, this.resize);
    },
    swipe: function(direction, callback) {
      let binding = callback.bind(this);
      console.log('Disabling the events');
      setTimeout(binding, 800, direction);
    },
    resize: function() {
      console.log(`Allow the events after this function is end`);
    }
  }

  /********************************************************************/

  let news_box = document.getElementById('box1');
  const newsCard = new Card(news_box);
}());

      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: auto;
        height: 800px;
        border: 4px dotted black;
      }
      .contents {
        position: absolute;
        width: 200px;
        height: 200px;
        float: left;
        top: 0;
        left: 0;
      }
      .purple {
        background-color: purple;
      }

    <div id="box1">
      <div class="contents purple">
        box content
      </div>
    </div>

Answer 1

Вы можете ввести логическое значение this.allowTriggering = true; внутри function Card($el)

в create вы должны поставить его на false this.allowTriggering = false;

в resize вы должны вернуть его к истинному this.allowTriggering = true;

Затем вы заключаете в свои функции start, move и end условие if, чтобы проверить, истинно ли this.allowTriggering.

Полный код:

'use strict';
(function () {
    function Card($el) {
        this.$el = $el;
        this.$el.addEventListener('touchstart', (e) => this.start(e));
        this.$el.addEventListener('touchmove', (e) => this.move(e));
        this.$el.addEventListener('touchend', (e) => this.end(e));
        this.allowTriggering = true;
    }

    Card.prototype = {
        start: function (e) {
            if (this.allowTriggering) {
                this.active = false;
                this.coordX = e.touches[0].clientX;
                this.coordY = e.touches[0].clientY;
            }
        },
        move: function (e) {
            if (this.allowTriggering) {
                this.active = true;
                var x = e.touches[0].clientX,
                    y = e.touches[0].clientY,
                    dist = Math.sqrt(x + this.coordX);
            }
        },
        end: function (e) {
            if (this.allowTriggering) {
                let distAmount = e.changedTouches[0].clientX - this.coordX;
                if (distAmount > 200) {
                    this.create(this.direction * -1, this.swipe);
                } else if (distAmount < -200) {
                    this.create(this.direction, this.swipe);
                }
            }
        },
        create: function (direction, callback) {
            let bound = callback.bind(this);
            console.log(`Disable the whole events (touchstart, move, end)`);
            this.allowTriggering = false;
            setTimeout(bound, 100, direction, this.resize);
        },
        swipe: function (direction, callback) {
            let binding = callback.bind(this);
            console.log('Disabling the events');
            setTimeout(binding, 800, direction);
        },
        resize: function () {
            console.log(`Allow the events after this function is end`);
            this.allowTriggering = true;
        }
    };

    /********************************************************************/

    let news_box = document.getElementById('box1');
    const newsCard = new Card(news_box);
}());