防抖debounce

• 當(dāng)事件觸發(fā)時，相應(yīng)的請求函數(shù)并不會被立即觸發(fā)，而是會先等待一定的時間
• 當(dāng)事件頻繁觸發(fā)時，請求函數(shù)的觸犯會被頻繁的推遲
• 只有等待了一段時間也沒有事件觸發(fā)，才執(zhí)行請求函數(shù)

應(yīng)用場景

• 輸入框中頻繁的輸入內(nèi)容，搜索或者替換提交信息
• 頻繁的點擊按鈕，觸發(fā)某個事件
• 監(jiān)聽瀏覽器滾動事件，完成某些特定操作
• 用戶縮放瀏覽器的 resize 事件

基本實現(xiàn)

//防抖
function debounce(fn,delay){    //fn 需要防抖的函數(shù)， delay,防抖的時間期限值
    let timer = null;  //借助閉包
    return function(){
        if(timer){
            clearTimeout(timer)  //進(jìn)入該分支語句，說明當(dāng)前正在一個計時的過程中，并且又觸發(fā)了相同事件。所以要取消當(dāng)前計時，重新開始計時
        }
        else{
            timer = setTimeout(fn,delay);  //進(jìn)入該分支說明當(dāng)前并沒有計時，開始計時。
        }
    }
}

節(jié)流 throttle

• 當(dāng)事件頻繁觸發(fā)時，相應(yīng)的請求函數(shù)在規(guī)定的執(zhí)行周期內(nèi)只觸發(fā)一次
• 想再次觸發(fā)時，那么就只能大于設(shè)定的執(zhí)行周期后才能再次觸發(fā)

應(yīng)用場景

• 窗口調(diào)整（resize）
• 頁面滾動
• dom 元素拖拽
• 搶購瘋狂點擊

基礎(chǔ)實現(xiàn)

// 方法一：
function throttle(fn,delay){
    let valid = true
    return function(){
        if(!valid){
            return false;  //休息時間內(nèi)，不執(zhí)行函數(shù)
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = false ;
        },delay)
    }
}

//方法二：
function throttle(fn,delay){
    let pre = 0;
    return function(...arg){
        let current = Date.now();
        if(current - pre >= delay){
            fn.call(this,...args);
            pre = Date.now();
        }
    }
}

總結(jié)

• 函數(shù)防抖： 當(dāng)多事件發(fā)生時，需要發(fā)起多次的請求操作，而防抖就是將多次的請求操作合并為一次請求操作。
• 函數(shù)節(jié)流： 當(dāng)事件多次發(fā)生時，需要發(fā)起多次請求操作，而節(jié)流就是講多次請求操作變?yōu)?strong>在規(guī)定時間間隔內(nèi)只發(fā)生一次請求操作，想要再次發(fā)生請求操作，那么要等等下一次時間間隔。
• 防抖原理： 維護(hù)一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內(nèi)再次觸發(fā)的話，就會取消之前的計時器而重新設(shè)置，這樣就只有最后一次操作能被觸發(fā)。
• 節(jié)流原理： 通過判斷是否到達(dá)一定時間來觸發(fā)函數(shù)。