1.监听浏览器滚动条
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
2.利用闭包创建函数
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
3.直接调用
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值,实际使用根据需要来配置 1000ms
4.实现思路,防抖就是在特定时间内由于用户操作平凡,函数执行次数过多造成浏览器性能下降,我们可以让函数在指定时间内如果过多执行,我们只执行一次
- 如果在1000ms内没有再次触发滚动事件,那么就执行函数
- 如果在1000ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
如果短时间内大量触发同一事件,只会执行一次函数