什么是防抖节流？
函数防抖（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）效果如下：
