引言

在前端開(kāi)發(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í)際效果。

一、概念

• 函數(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)

• 函數(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ù)開(kāi)頭判斷標(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，在開(kāi)頭被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));

• 函數(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ū)別

節(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ù)：

func (Function): 要節(jié)流的函數(shù)。

[wait=0] (number): 需要節(jié)流的毫秒。

[options=] (Object): 選項(xiàng)對(duì)象。

[options.leading=true] (boolean): 指定調(diào)用在節(jié)流開(kāi)始前。

[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ù)：

func (Function): 要防抖動(dòng)的函數(shù)。

[wait=0] (number): 需要延遲的毫秒數(shù)。

[options=] (Object): 選項(xiàng)對(duì)象。

[options.leading=false] (boolean): 指定在延遲開(kāi)始前調(diào)用。

[options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。

[options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用。

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

例子：

// 避免窗口在變動(dòng)時(shí)出現(xiàn)昂貴的計(jì)算開(kāi)銷。
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)景

• resize事件監(jiān)聽(tīng)瀏覽器屏幕寬高，自適應(yīng)適配操作
• scroll事件監(jiān)聽(tīng)屏幕滾動(dòng)，如：導(dǎo)航欄/Tab欄動(dòng)態(tài)置頂、下拉刷新、上劃加載更多
• 表單的input事件查詢接口獲取數(shù)據(jù)
• tab切換頻率控制，防止頻繁點(diǎn)擊過(guò)快
• 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ā)。

以上就是JS中節(jié)流和防抖函數(shù)的實(shí)現(xiàn)及使用區(qū)別示例的詳細(xì)內(nèi)容，更多關(guān)于JS節(jié)流防抖函數(shù)實(shí)現(xiàn)區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！