javascript - 我将如何在纯 JavaScript 中暂时禁用该事件？

Question

我正在使用纯 JavaScript 制作我自己的 slider 系统。问题是每次当我在动画完成之前重做 touch-starting 时，事件和动画都会像这样覆盖:

我的期望是摆脱覆盖，并暂时禁用touchevents直到CSS动画(通过在JS中使用.classList添加，删除CSS类)结束了。

我试图自己解决这个问题，但不知道该怎么做。

我附上了我在上面的 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

你可以在 function Card($el) 中引入一个 bool 值 this.allowTriggering = true;

在 create 中你应该把它设置为 false this.allowTriggering = false;

在 resize 中，您应该将其恢复为 true this.allowTriggering = true;

然后用 if 条件包装函数 start、move 和 end 以检查 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);
}());