在vue中使用防抖函数

在vue中使用防抖函数

有时候我们不想频繁触发一个函数,比如在300ms内只能触发一次,就可以用防抖函数来处理

防抖函数的思想是:

设置定时器id为null

执行方法

判断id是否存在,如果不存在,则返回,如果存在则执行

同时设定一个定时器,在delay秒后设置定时器id为非null

这样如果你在delay秒内调用,那么在if判断里就直接返回了

除非你经过了delay秒

如下:

 imgIndex: 1,
      //防抖函数存储定时器id,有值则有正在进行的函数,返回return;  无值则放行
      throttleId: null,
      //防抖事件间隔=>小于300ms重复触发不执行
      delay: 300
   /**
     *防抖函数,method待执行的函数,arg为该函数参数arguments
     */
    throttle(method, arg) {
      if (this.throttleId) {
        return;
      }
      method(arg);
      this.throttleId = setTimeout(() => {
        this.throttleId = undefined;
      }, this.delay);
    }
      //调用防抖函数,参数为要执行的函数
      this.throttle(this.MouseWheel);