当事件被触发时,设定一个定时器,若期间又被触发,则重新设定周期,直到周期结束
//需求:监听浏览器滚动事件,返回当前滚条与顶部的距离
//需求实现(未处理版)
function watchScroll() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(scrollTop)
}
window.onscroll = watchScroll
//需求实现(debounce处理版)
//如果不做处理,在拖动滚动条时这个函数触发的频率会很高,为了不浪费浏览器性能,这里可以用上防抖函数
/**
* @param fn:需要防抖处理的函数,delay:防抖设置的间隔
* @return function
*/
function debounce(fn, delay) {
let timer = null
//这里用到了闭包,每次onscroll触发都会调用下一行返回的匿名函数,所以timer=null只会执行一次,并且timer会一直保留到闭包函数销毁为止
return function () {
if (timer) {
clearTimeout(timer)
timer = setTimeout(fn, delay)
} else {
timer = setTimeout(fn, delay)
}
}
}
防抖、节流处理-浏览器滚动(三)
于 2022-01-21 16:26:30 首次发布