节流与防抖

120 阅读1分钟

写在前面:节流与防抖都是用来对容易过度触发的事件进行优化处理,比如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)