在某些场景我们并不需要高频的反馈,毕竟浏览器性能是有限的,不应该浪费在这里。
我们可以在第一次触发事件时,不立即执行函数,而是给出一个期限值,例如3000ms。
- 如果在3000ms 内没有次触发滚动事件,那么就执行函数
- 如果在3000ms 内 在次触发滚动事件,那么当前的计时取消,重新开始计时
效果:如果短时间内大量触发同一事件,只会执行一次函数
//防抖函数封装 参数1:函数 参数2:延时时间
function debounce(fn ,delay){
var timer=null //定义一个timer 为null
return function(){
//如果timer 存在就把它清除掉
if(timer){
clearTimeout(timer)
}
//如果这个timer 不存在就去执行这个函数
timer=setTimeout(fn,delay)
}
}
//使用
//监听窗口滚动事件
window.onscroll=debounce(scrollHandle,3000) //调用这个防抖函数
function scrollHandle(){
var scroolTop=document.documentElement.scrollTo;
}