事件节流方法

事件节流,简而言之就是防止事件被频繁触发;

不多说,上代码;

import DOM from '../methods/DOM';// 这是我之前单独写的一个绑定移除dom事件的方法;

class EventThrottle {
  constructor() {
    this.arr = []; // 保存所有绑定了事件节流的对象
  }

  // FN方法 duration时间,触发的最大频率  eventType动作(click或其他)  eventTarget对象
  add({ FN, duration, eventType, eventTarget }) {
    let timer = null;
    const symbol = Symbol(Date.now());
    const hFN = (e) => {
      if (!timer) {
        FN(e);
        timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
        }, duration);
      }
    };
    const target = eventTarget || document;

    const removeFN = DOM.ListenerFN({
      target,
      FN: hFN,
      event: eventType,
    });

    this.arr.push({
      removeFN,
      symbol,
    });
    return symbol;
  }

  remove({ symbol }) {
    this.arr.filter((item) => {
      if (item.symbol !== symbol) {
        return true;
      }
      item.removeFN();
      return false;
    });
  }
}

const eventThrottle = new EventThrottle(); // 实例化

export default eventThrottle; // 返回实例化对象

在外部的话,引用后,通过add方法添加,remove方法来移除;

eventThrottle.add({ FN, duration, eventType, eventTarget }); // 会返回一个symbol

eventThrottle.remove({symbol});