防抖:
防抖大致意思是高频触发的函数,在一定的时间间隔内只会执行一次。主要用来处理窗口的resize,滑动,滚动,输入等高频事件,也可以处理防止恶意高频点击按钮。
1、简易版防抖:
const d = function(fn, wait){
let timeout = null
return function(){
clearTimeout(timeout)
let args = arguments
timeout = setTimeout(() => {
fn(...args)
}, wait);
}
}
实际工作中很少会手写这些工具代码,一般都会使用lodash
或者underscore
这些工具库。分析下underscore
的防抖代码使用定时器结合时间戳和闭包实现的非常巧妙。
2、手写debounce:
// fn 是需要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait = 50) {
// 通过闭包缓存一个定时器 id
let timer = null
// 将 debounce 处理结果当作函数返回
// 触发事件回调时执行这个返回函数
return function(...args) {
// this保存给context
const context = this
// 如果已经设定过定时器就清空上一次的定时器
if (timer) clearTimeout(timer)
// 开始设定一个新的定时器,定时器结束后执行传入的函数 fn
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}
// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)
// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')
document.addEventListener('scroll', betterFn)
3、underscore版防抖:
const _.debounce = function(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
const last = _.now() - timestamp;
console.log(last)
if (last < wait && last >= 0) {
console.log(1)
timeout = setTimeout(later, wait - last);
} else {
console.log(2)
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
const callNow = immediate && !timeout;
console.log(timeout)
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
将其简化一下,整体其实就两部分:
const _.debounce = function( func, wait, immediate){
// 函数的回调部分
// 当immediate === false时
// func真正的执行部分
function later(){};
return function(){
// 在这里判断func是否立即执行
// 是否有计时器的存在
}
}
下面分析返回的匿名函数部分:
return function() {
context = this;
args = arguments;
// 这里调用了underscore封装的调用时间戳的方法
// 等同于
// timestamp = Date.now()
timestamp = _.now();
const callNow = immediate && !timeout;
console.log(timeout)
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
};
这里我要说的是timestamp
,它存储的是动作发生时的时间戳,假设我这里调用debounce
时传入的wait
为10000
,也就是10秒。我第一次调用事件函数是在10:00:00
,按照设定,10:00:10
之后才能调用第二次方法,在这10秒内,任何调用都是不执行的。
当我第一次执行事件时:
timeout = undefined;
immediate先设置为false
所以:
callNow === false
只有这句话是执行的:
if (!timeout) timeout = setTimeout(later, wait);
那接着来看later都有什么:
var later = function() {
// var last = Date.now() - timestamp;
const last = _.now() - timestamp;
console.log(last)
if (last < wait && last >= 0) {
console.log(1)
timeout = setTimeout(later, wait - last);
} else {
console.log(2)
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
之前,判断wait
内重复输入,我们取消事件的方法是这样的:
if(timer){clearTimeout(timer)}
但在这里,我们是不是都还没看到怎么处理wait
时间内,重复输入无效的问题?别急,现在就来说。玄妙都在这个last
变量上。
之前说过,timestamp
存储的是第一次事件执行时的时间戳(10:00:00)
,但现在我没想等十秒,过了五秒我就触发了第二次事件。所以timestamp
现在的内容就变成新的时间戳了(10:00:05)
。但问题是,timer
的回调函数至少要到10:00:10
之后才会执行,也就是说:
last>=5
由于代码执行堵塞导致last>10
的情况有可能存在,但是不符合我们现在讨论的,而且真的是太特殊了,我们就不说了。那就假设last
为5秒(5000ms)
。
last < wait && last >= 0
这句话就是true
,那就执行里面的代码。但注意看里面计时器对于时间的写法:
wait - last
换个说法就是,你在10:00:00
启动了我,但是你在10:00:05
又动了,我原本应该在10:00:10
执行,但是现在惩罚你提前行动,那你之前等的时间就不算,你要再重新多等这几秒10:00:15
。
这个难点解决了,其他就都好说。
later
剩余的部分就是判断如果当初设置的是立即执行(immediate = true)
,func
就不再执行一遍了,否则(immediate = false)
func
执行。