什么是函数防抖和函数节流
防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行
- 函数防抖
如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。
- 函数节流
如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应的事件处理方法。函数节流保证一个事件一定时间内只能执行一次。
函数防抖应用场景
- 搜索框输入（只需要最后一次输入完成后再放松Ajax请求）
- 滚动事件scroll（只需要执行触发的最后一次滚动事件的处理程序）
- 文本输入的验证（连续输入文字后发送Ajax请求进行验证，停止输入后验证一次）
在工具类中定义函数防抖
/**
* 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true=立即执行(执行第一次)，false=非立即执行(执行最后一次)
*/
function debounce(func, wait=100, immediate=false) {
//只会初始化时执行一次
var timeout;
//此函数每次触发调用
return function () {
var context = this;
var args = arguments;
//多次触发则清除上一个定时器
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function () {
timeout = null;
}, wait);
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
在method中使用
methods: {
testFun: function(searchValue) {
this.$emit('search', searchValue);
},
/**
* 触发确认搜索事件
*/
emitSearchEvent: function(searchValue) {
//使用函数防抖提交搜索事件，短时间内多次触发仅提交最后一次
//调用函数防抖的同时传入一个方法和间隔时间（传入的方法不带括号表示直接把函数本身传入，如果带有括号则表示直接执行函数）
//此处写法相当于只声明一次防抖函数
this.searchDebounceFun = this.searchDebounceFun || debounce(this.testFun, 200);
//调用函数防抖，可传入参数
this.searchDebounceFun(searchValue);
},
},
