先简单介绍一下debounce,从最简单的一个场景入手,当用户不断点击页面,短时间内频繁的触发点击事件,只有在用户触发事件后的ns时间内,没有再触发事件,真正的监听函数才会执行,如果在这段时间内再次触发了事件,就需要重新计算这个ns时间。
debounce最主要的作用是把多个触法事件的操作延迟到最后一次触法执行,在性能上做了一定的优化。
这幅图算是很形象地展示了debounce的作用。
正常,移动鼠标就会触发事件。我在左侧快速移动鼠标,regular没有对事件做任何防抖节流处理,移动一次就触发一次事件。而debounce只在我移动鼠标间隔超过200ms的时候才触发一次。
可以到这个可视化分析页面:添加链接描述实地感受下。
这在我们提交表单时非常有用。
实现debounce
debounce的核心实现,就是要判断每次触发事件的时候,是否要执行真正的func。
大体思路是每次触发事件都开启一个延时器,在延时器结束的时候对比最后一次触发事件时的时间差,如果时间差大于延迟的阈值,那么就执行真正的func。
大致结构如下:
function debounce (func, wait) {
var lastCallTime // 最后一次触法事件的时间
var lastThis // 作用域
var lastArgs // 参数
var timerId // 定时器对象
wait = +wait || 0
// 启动定时器
function startTimer (timerExpired, wait) {
return setTimeout(timerExpired, wait)
}
// func函数执行
function invokeFunc () {
}
// 调用func函数的判定条件
function shouldInvoke () {
}
// 定时器的回调函数
function timerExpired () {
// 在这里判断触法事件的时间差
}
// 要返回的函数
function debounced (...args) {
}
return debounced
}
debounced
每一次触发事件的时候都会进入到这个函数,这个函数需要做这么几个事情
- 确定作用域和参数
- 更新触法事件的时间,也就是
lastCallTime
- 启动定时器
timerId
function debounced (...args) {
const time = Date.now()
lastThis = this
lastArgs = args
lastCallTime = time
timerId = startTimer(timerExpired, wait)
}
再总结一下。每一次触法事件,都开启一个定时器timerId,并且会更新触法事件的最后时间lastCallTime,在定时器的回调函数里面,判断回调函数的执行时间与lastCallTime的时间差,如果大于阈值,说明延迟时间到了,func执行,如果小于,就忽略。
这其实只是实现了一个basicDebounce,其实有的时候我们需要在频繁触法事件的开始立即执行func,而忽略后面的触法事件,这就需要加入参数控制,也就是lodash中的trailing和leading,甚至两者同时存在,头尾各执行一次,还有就是throttle函数节流,保证在一段时间内func至少执行一次,这就是lodash中的maxWait参数。下一篇文章会完善这些功能,届时,一个完整的debounce才是真正的实现了。
throttle
简单地理解,debounce是将多个请求合并成一个事件。正常的debounce是触发操作的间隔大于设定的等待时间才会真正触发事件,但如果给maxWait设置了值,那么其实这就已经是一个throttle了。
throttle是指设定的时间内只触发一次事件。
requestAnimationFrame
它也是减少触发事件触发频率的一种解决方案。
可以看成_.throttle(dosomething, 16),但准确性更好。它是浏览器的原生api,设计出来就是为了提供更高的准确性。
优点:
1.目标是60桢,但内部自己会决定渲染频率;
2.简单稳定,减少维护负担
缺点:
1.内部自己决定什么时候结束,不是手动取消;
2.浏览器选项卡不活动状态下,不会触发这个api。但scroll,鼠标和键盘事件不受影响;
3.不支持IE9, Opera Mini 和老版本的 Android,需要做polyfill.
4.不支持nodejs。
总结
1.debounce: 将多个快速触发的事件合并成一个响应事件。
throttle: 保证每隔一定时间会触发一次响应事件。例如每200ms检查滚动位置来触发一个css动画。
requestAnimationFrame: throttle的替代方案。当你需要重新计算或渲染屏幕上的元素的位置,保证平滑更改和动画(一般的应用场景就是这个)。