写在前面:节流与防抖都是用来对容易过度触发的事件进行优化处理,比如resize、scroll、mousemove、input输入事件等等。
节流
节流中心思想:在某段时间内,不管你触发了多少次回调,只认第一次,无视后来产生的回调,并在计时结束时给予响应。可以理解为游戏里面的技能冷却
代码实现:
function throttle(fn, interval){ //fn表示要封装的事件回调,interval表示每轮间隔时间
let canRun = true //初始化状态,可执行回调
return function(){
if(!canRun) return
canRun = false //拦截每轮除第一次外,后面产生的回调
let context = this,
args = [...arguments]
setTimeout(()=>{
fn.apply(context,args)
canRun = true //本轮执行完毕后,开启下一轮回调
},interval)
}
}
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
document.addEventListener('scroll', better_scroll)
防抖
防抖的中心思想:在某段时间内,不管你触发了多少次回调,只认最后一次
代码实现:
function debounce(fn, delay){ //fn表示要封装的事件回调,delay是每次推迟执行的等待时间
let timer = null //定义一个空的定时器
return function(){
if(timer){
clearTimeout(timer) //每次事件被触发时,都去清除之前的旧定时器
}
let context = this,
args = [...arguments]
//设置定时器,准备执行回调
timer = setTimeout(()=>{
fn.apply(context,args)
},delay)
}
}
// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)
document.addEventListener('scroll', better_scroll)