防抖和节流的介绍及实现

防抖

概述：在规定时间内只执行一次（执行最后一次）

举个例子：电梯关门案例

• a 进入电梯 等待5s后 就可以上升了

• 在a等待了4s中后 b过来 那么之前的等待就结束了 开始新的等待

• 在b等待了3s后 c过来 那么之前的等待也结束了 开始新的等待

• .... 直到最后一次等待结束 电梯就上升 （实际电梯上升这个操作 只执行一次 是最后一次）

 

 防抖实现

//执行的函数  等待的时间
function debounce(fn,delay){
    var timer = null //记录有没有人在等
    return function(){
        if(timer) clearTimeout(timer) //有人等 上次等待清除
        timer = setTimeout(fn,delay) //开始新的等待
    }
}

示例

let fn = debounce(function(){
    console.log('移进去了');
},500)
//div移进只执行最后一次
document.querySelector('div').onmouseenter = function(){
    fn()
}

节流

概述： 在一定时间范围内 执行第一次 （减少执行次数）

举个例子：高铁上厕所案例

• 当灯是绿灯的时候 a进去了 这个灯变红灯

• a 没有执行完的时候 b进不去 只有当a 执行完 把红灯变成绿灯 b才能进去

• 同样的 c也是一样的

 

 节流代码实现

function throttle(fn,delay){
    var timer = null //默认没有人
    return function(){
        //判断当前是否有人
        if(timer) return //有人不做了 判断节流阀是否开启
        timer = setTimerout(()=>{
            fn()
            timer = null //做完了 将节流阀关闭
        },delay)
    }
}

示例

let fn = throttle(function(){
    console.log('移进去了');
},5000)
document.querySelector('div').onmouseenter = function(){
    fn()
}