#vue# vue 中使用防抖和节流，防止重复点击（附源码）

什么是防抖节流？

函数防抖（debounce）：

是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，（例如滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。

函数节流（throttle）：

是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，对于短时间内大量触发同一事件（例如滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

为什么要用防抖节流？

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

怎么使用防抖节流？

（1）新建一个文件，例如在utils下面新建common.js文件

//防抖
export const Debounce = function (fn, t) {
    let delay = t || 200;
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    }
  }
//节流
  export const Throttle = function (fn, delay = 200) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
      if (!canRun) return;//在delay时间内，直接返回，不执行fn
      canRun = false;
      setTimeout(() => {
        fn.apply(this, arguments);
        canRun = true;//直到执行完fn,也就是delay时间后，打开开关，可以执行下一个fn
      }, delay);
    };
  }

（2）在需要用到的页面引入防抖节流

import {Debounce,Throttle} from '@/utils/common';//引入防抖和节流
//路径需根据文件所在的位置，进行修改

（3）在需要用到位置（例如某些按钮上），在该按钮的点击事件上，绑定防抖或节流事件的方法

 <el-form-item>
     <el-button type="primary" @click="toFilterData()">查询</el-button>
     <el-button type="info" @click="reset()">重置</el-button>
</el-form-item>

methods: {
  //查询按钮---防抖
  //toFilterData当前点击事件
  //Debounce点击事件绑定防抖的方法
  toFilterData:Debounce(function(val) { //调用防抖
      console.log('不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件')
      this.getTabletsIndex();//列表接口
   },2000),


  //查询按钮---节流
  //toFilterData当前点击事件
  //Throttle点击事件绑定节流的方法
  toFilterData:Throttle(function(val) { //调用节流
    console.log('第一次请求马上触发，往后不管你怎么触发，我只在2s后请求,2s内触发我要重    新计算时间的')
    this.getTabletsIndex();//列表接口
  },2000),

}

（4）效果如下：