1. 什么是防抖节流
防抖：防止重复点击触发事件
首先啥是抖？ 抖就是一哆嗦！原本点一下，现在点了3下！不知道老铁脑子是不是很有画面感！哈哈哈哈哈哈
典型应用就是防止用户多次重复点击请求数据。
代码实现要点：设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和清除
直接上代码
function debounce(fn, time) {
let _arguments = arguments
let timeout = null
return function () {
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(() => {
fn.call(this, _arguments)
}, time);
}
}
节流：指定时间间隔内只会执行一次任务
大家都玩过FPS游戏吧（没玩过？？？打枪知道了吧！）道具的射速是一定的，不会因为你点击鼠标的速度加快而增加。
代码实现要点：通过一个布尔变量作为状态，判断代码是否需要执行
直接上代码
function throttle(fn, time) {
let _arguments = arguments
let canRun = true
return function () {
if (!canRun) return
canRun = false
setTimeout(() => {
fn.call(this, _arguments)
canRun = true
}, time);
}
}
2. 在Vue中优雅的使用
我的应用场景：头像裁剪组件，对滚轮缩放后生成预览图片进行防抖处理
因为Vue组件中的 this 原因
methods:{
previewImageDebounce: Debounce(this.previewImage, 1000),
}
//报错 Uncaught TypeError: Cannot read property 'previewImage' of undefined
我们要针对上面的防抖函数进行改造（函数内容this指向没问题，我们通过函数名调用函数）
/*
* description: 在vue中使用的防抖函数
* param fnName {String} 函数名
* param time {Number} 延迟时间
* return: 处理后的执行函数
*/
function VueDebounce(fnName, time) {
let timeout = null;
return function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
this[fnName]();
}, time);
};
}
在Vue组件中使用
methods:{
/* 监听滚轮滑动 */
Wheel(ev) {
if (!this.newImage) return;
// 判断放大和缩小
ev.deltaY > 0 ? this.makeScaleChange(1) : this.makeScaleChange(0);
// 预览图片
this.previewImageDebounce();
},
/* 预览图片(防抖处理后) */
previewImageDebounce: VueDebounce("previewImage", 1000),
/* 预览图片 */
previewImage() {......}
}
这样的写法，算是很优雅了。节流就不在这里展开了，开动你的小脑袋不成问题。