JS 節流與防抖

一、區別
       節流強調的是n秒內函數最多觸發一次，注意這裏的用詞最多，也就是可能不觸發，一般第一次和最後一次可能不會觸發；
防抖強調的是函數兩次調用的間隔必須大於n秒，如果函數觸發的頻率一直小於n秒，那麼只有最後一次纔會觸發函數執行

二、場景
節流：當給document加scroll事件時，假定處理函數爲fn，那麼當滑動鼠標時scroll事件會不斷的被觸發，影響滑動性能，這時可以用節流處理一下 throttle(fn，time)，可以保證fn在time時間內只觸發一次
防抖：當做隨着輸入框輸入不同內容展示不同的結果列表類似需求時，一般會綁定input的change事件，該事件在用戶輸入過程中會多次被觸發，這時可以用防抖處理一下 debounce(fn,time)，可以保證在用戶輸入完time時間後才觸發fn。這裏不用 throttle，因爲debounce更加符合

三、簡易實現

throttle:節流

function throttle(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
        const _this = this;
        const callNow = imediate && !timer
        if (timer) {
            return;
        }
        timer = setTimeout(()=>{
            timer = null;
        },time);
         if(callNow){
             fn.apply(_this,args);
         }
    }
}

debounce:

function debounce(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
        const _this = this;
        const callNow = imediate && !timer
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            timer = null;
        },time)
        if(callNow){
            fn.apply(_this,args);
        }
    }
}

 

交流
可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！歡迎關注公衆號共同學習。