防抖

概述：在規定時間內只執行一次（執行最後一次）

舉個例子：電梯關門案例

• 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()
}