在绑定 scroll 、resize 这类事件时,当它发生时,它被触发的频次非常高,间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的,就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。
函数防抖
规定函数至少间隔多久执行。
函数执行过一次后,在n秒内不能再次执行,否则推迟函数执行
下一次函数调用将清除上一次的定时器,并用setTimeout重新计时
其实就是利用的时间间隔。当事件触发时间间隔很短时,就认为用户操作还未完成,推迟事件处理程序的执行。
<input type="text" id="gl">
<script>
// 简单的防抖动函数
function debounce(func, wait) {
let timeout; // 定时器变量
return function() {
clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
timeout = setTimeout(func, wait); // 指定 xx ms 后触发真正想进行的操作 handler
};
}
//事件处理程序
function realFunc(){
console.log("Success");
}
const input = document.getElementById('input');
input.addEventListener('keydown',debounce(realFunc,500));
//input.addEventListener('keydown',realFunc);
</script>
函数节流
规定函数在某时间段内最多执行一次
- 函数在n秒内最多执行一次
- 下一次函数调用将清除上一次的定时器
- 若函数执行的时间间隔小于等于规定时间间隔则用setTimeout在规定时间后再执行
- 若函数执行的时间间隔大于规定时间间隔则执行函数,并重新计时
<script>
//节流函数
function throttle(func,interval){
let timeout;
let startTime = new Date();
return function (){
clearTimeout(timeout);
let curTime = new Date();
if(curTime - startTime <= interval){
//小于规定时间间隔时,用setTimeout在指定时间后再执行
timeout = setTimeout(()=>{
func();
},interval)
} else {
//重新计时并执行函数
startTime = curTime;
func()
}
}
}
//事件处理程序
function realFunc(){
console.log('success')
}
window.addEventListener('scroll',throttle(realFunc,100));
//window.addEventListener('scroll',realFunc);
</script>
总结
不管是函数节流还是函数防抖,我们减少的是事件处理程序的调用频率,而不是事件的调用频率。每次滚动、每次输入都会触发事件。