在前端開發(fā)中，經(jīng)常和DOM呛哟、BOM打交道叠荠，例如：窗口的resize、scroll扫责，輸入框內(nèi)容校驗(yàn)榛鼎，按鈕點(diǎn)擊等等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無(wú)限制鳖孤，會(huì)加重瀏覽器的負(fù)擔(dān)者娱，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用throttle（節(jié)流）和debounce（防抖）的方式來(lái)減少調(diào)用頻率淌铐，提高性能的同時(shí)又不影響實(shí)際效果肺然。

Javascript 節(jié)流和防抖

一、概念

• 函數(shù)節(jié)流( throttle )：高頻事件觸發(fā)腿准，但在n秒內(nèi)只會(huì)執(zhí)行一次，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率拾碌。
• 函數(shù)防抖( debounce )：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次吐葱，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間校翔。
• 函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次弟跑，以優(yōu)化函數(shù)觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲防症，假死或卡頓的現(xiàn)象孟辑。

二、實(shí)現(xiàn)

1. 函數(shù)節(jié)流( throttle )

實(shí)現(xiàn)方式： 每次觸發(fā)事件時(shí)蔫敲，如果當(dāng)前有等待執(zhí)行的延時(shí)函數(shù)饲嗽，則直接return。

// 節(jié)流 throttle 代碼

function throttle(fn,delay) {
    let canRun = true; // 通過(guò)閉包保存一個(gè)標(biāo)記
    return function () {
         // 在函數(shù)開頭判斷標(biāo)記是否為true奈嘿，不為true則return
        if (!canRun) return;
         // 立即設(shè)置為false
        canRun = false;
        // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true(關(guān)鍵)表示可以執(zhí)行下一次循環(huán)了貌虾。
        // 當(dāng)定時(shí)器沒(méi)有執(zhí)行的時(shí)候標(biāo)記永遠(yuǎn)是false，在開頭被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function log(e) {
    console.log('節(jié)流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(log,500));

2. 函數(shù)防抖( debounce )

• 實(shí)現(xiàn)方式： 每次觸發(fā)事件時(shí)設(shè)置一個(gè)延遲調(diào)用方法裙犹，并且取消之前的延時(shí)調(diào)用方法尽狠。
• 缺點(diǎn)： 如果事件在規(guī)定的時(shí)間間隔內(nèi)被不斷的觸發(fā)衔憨，則調(diào)用方法會(huì)被不斷的延遲。

// 防抖 debounce 代碼

function debounce(fn,delay) {
    var timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
    return function (e) {
        // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又創(chuàng)建一個(gè)新的 setTimeout, 這樣就能保證interval 間隔內(nèi)如果時(shí)間持續(xù)觸發(fā)袄膏，就不會(huì)執(zhí)行 fn 函數(shù)
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 處理函數(shù)
function run() {
    console.log('防抖：', Math.random());
}
        
//滾動(dòng)事件
window.addEventListener('scroll', debounce(run, 500));

三践图、區(qū)別

區(qū)別：節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)沉馆，而防抖函數(shù)只是在最后一次事件后才觸發(fā)一次函數(shù)平项。 比如在頁(yè)面的無(wú)限加載場(chǎng)景下，我們需要用戶在滾動(dòng)頁(yè)面時(shí)悍及，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求闽瓢，而不是在用戶停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場(chǎng)景心赶，就適合用節(jié)流技術(shù)來(lái)實(shí)現(xiàn)扣讼。

四、Lodash

Lodash 是一個(gè)一致性缨叫、模塊化椭符、高性能的 JavaScript 實(shí)用工具庫(kù)。其中就封裝好了節(jié)流函數(shù) throttle 和防抖函數(shù) debounce耻姥。

4-1.throttle

參數(shù)：

1. func (Function): 要節(jié)流的函數(shù)销钝。
2. [wait=0] (number): 需要節(jié)流的毫秒。
3. [options=] (Object): 選項(xiàng)對(duì)象琐簇。
4. [options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前蒸健。
5. [options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后。

返回： (Function): 返回節(jié)流的函數(shù)婉商。

例子：

// 避免在滾動(dòng)時(shí)過(guò)分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));

// 點(diǎn)擊后就調(diào)用 `renewToken`似忧，但5分鐘內(nèi)超過(guò)1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);

// 取消一個(gè) trailing 的節(jié)流調(diào)用丈秩。
jQuery(window).on('popstate', throttled.cancel);

4-2.debounce

參數(shù)：

1. func (Function): 要防抖動(dòng)的函數(shù)盯捌。
2. [wait=0] (number): 需要延遲的毫秒數(shù)。
3. [options=] (Object): 選項(xiàng)對(duì)象蘑秽。
4. [options.leading=false] (boolean): 指定在延遲開始前調(diào)用饺著。
5. [options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。
6. [options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用肠牲。

返回： (Function): 返回新的 debounced（防抖動(dòng)）函數(shù)幼衰。

例子：

// 避免窗口在變動(dòng)時(shí)出現(xiàn)昂貴的計(jì)算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 當(dāng)點(diǎn)擊時(shí) `sendMail` 隨后就被調(diào)用埂材。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 確保 `batchLog` 調(diào)用1次之后塑顺，1秒內(nèi)會(huì)被觸發(fā)。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一個(gè) trailing 的防抖動(dòng)調(diào)用
jQuery(window).on('popstate', debounced.cancel);

五、使用場(chǎng)景

1. resize事件監(jiān)聽(tīng)瀏覽器屏幕寬高严拒，自適應(yīng)適配操作
2. scroll事件監(jiān)聽(tīng)屏幕滾動(dòng)扬绪，如：導(dǎo)航欄/Tab欄動(dòng)態(tài)置頂、下拉刷新裤唠、上劃加載更多
3. 表單的input事件查詢接口獲取數(shù)據(jù)
4. tab切換頻率控制挤牛，防止頻繁點(diǎn)擊過(guò)快
5. Echart圖表中tooltip.formatter方法

六、總結(jié)

1.節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)种蘸。原理是通過(guò)判斷是否有延遲調(diào)用函數(shù)未執(zhí)行墓赴。
2.防抖：將多次操作合并為一次操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器航瞭，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)诫硕，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置刊侯。這樣一來(lái)章办，只有最后一次操作能被觸發(fā)。

歡迎訪問(wèn)：天問(wèn)博客