摘要：關(guān)于節(jié)流的實(shí)現(xiàn)，有兩種主流的實(shí)現(xiàn)方式，一種是使用時(shí)間戳，一種是設(shè)置定時(shí)器。當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行，直到定時(shí)器執(zhí)行，然后執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。

JavaScript 專題系列第二篇，講解節(jié)流，帶你從零實(shí)現(xiàn)一個(gè) underscore 的 throttle 函數(shù)

在《JavaScript專題之跟著underscore學(xué)防抖》中，我們了解了為什么要限制事件的頻繁觸發(fā)，以及如何做限制：

debounce 防抖

throttle 節(jié)流

今天重點(diǎn)講講節(jié)流的實(shí)現(xiàn)。

節(jié)流的原理很簡(jiǎn)單：

如果你持續(xù)觸發(fā)事件，每隔一段時(shí)間，只執(zhí)行一次事件。

根據(jù)首次是否執(zhí)行以及結(jié)束后是否執(zhí)行，效果有所不同，實(shí)現(xiàn)的方式也有所不同。
我們用 leading 代表首次是否執(zhí)行，trailing 代表結(jié)束后是否再執(zhí)行一次。

關(guān)于節(jié)流的實(shí)現(xiàn)，有兩種主流的實(shí)現(xiàn)方式，一種是使用時(shí)間戳，一種是設(shè)置定時(shí)器。

讓我們來(lái)看第一種方法：使用時(shí)間戳，當(dāng)觸發(fā)事件的時(shí)候，我們?nèi)〕霎?dāng)前的時(shí)間戳，然后減去之前的時(shí)間戳(最一開始值設(shè)為 0 )，如果大于設(shè)置的時(shí)間周期，就執(zhí)行函數(shù)，然后更新時(shí)間戳為當(dāng)前的時(shí)間戳，如果小于，就不執(zhí)行。

看了這個(gè)表述，是不是感覺(jué)已經(jīng)可以寫出代碼了…… 讓我們來(lái)寫第一版的代碼：

// 第一版
function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

例子依然是用講 debounce 中的例子，如果你要使用：

container.onmousemove = throttle(getUserAction, 1000);

效果演示如下：

我們可以看到：當(dāng)鼠標(biāo)移入的時(shí)候，事件立刻執(zhí)行，每過(guò) 1s 會(huì)執(zhí)行一次，如果在 4.2s 停止觸發(fā)，以后不會(huì)再執(zhí)行事件。

接下來(lái)，我們講講第二種實(shí)現(xiàn)方式，使用定時(shí)器。

當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行，直到定時(shí)器執(zhí)行，然后執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。

// 第二版
function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

為了讓效果更加明顯，我們?cè)O(shè)置 wait 的時(shí)間為 3s，效果演示如下：

我們可以看到：當(dāng)鼠標(biāo)移入的時(shí)候，事件不會(huì)立刻執(zhí)行，晃了 3s 后終于執(zhí)行了一次，此后每 3s 執(zhí)行一次，當(dāng)數(shù)字顯示為 3 的時(shí)候，立刻移出鼠標(biāo)，相當(dāng)于大約 9.2s 的時(shí)候停止觸發(fā)，但是依然會(huì)在第 12s 的時(shí)候執(zhí)行一次事件。

所以比較兩個(gè)方法：

第一種事件會(huì)立刻執(zhí)行，第二種事件會(huì)在 n 秒后第一次執(zhí)行

第一種事件停止觸發(fā)后沒(méi)有辦法再執(zhí)行事件，第二種事件停止觸發(fā)后依然會(huì)再執(zhí)行一次事件

那我們想要一個(gè)什么樣的呢？

有人就說(shuō)了：我想要一個(gè)有頭有尾的！就是鼠標(biāo)移入能立刻執(zhí)行，停止觸發(fā)的時(shí)候還能再執(zhí)行一次！

所以我們綜合兩者的優(yōu)勢(shì)，然后雙劍合璧，寫一版代碼：

// 第三版
function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次觸發(fā) func 剩余的時(shí)間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果沒(méi)有剩余的時(shí)間了或者你改了系統(tǒng)時(shí)間
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

效果演示如下：

我們可以看到：鼠標(biāo)移入，事件立刻執(zhí)行，晃了 3s，事件再一次執(zhí)行，當(dāng)數(shù)字變成 3 的時(shí)候，也就是 6s 后，我們立刻移出鼠標(biāo)，停止觸發(fā)事件，9s 的時(shí)候，依然會(huì)再執(zhí)行一次事件。

但是我有時(shí)也希望無(wú)頭有尾，或者有頭無(wú)尾，這個(gè)咋辦？

那我們?cè)O(shè)置個(gè) options 作為第三個(gè)參數(shù)，然后根據(jù)傳的值判斷到底哪種效果，我們約定:

leading：false 表示禁用第一次執(zhí)行
trailing: false 表示禁用停止觸發(fā)的回調(diào)

我們來(lái)改一下代碼：

// 第四版
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

在 debounce 的實(shí)現(xiàn)中，我們加了一個(gè) cancel 方法，throttle 我們也加個(gè) cancel 方法：

// 第五版 非完整代碼，完整代碼請(qǐng)查看最后的演示代碼鏈接
...
throttled.cancel = function() {
    clearTimeout(timeout);
    previous = 0;
    timeout = null;
}
...

我們要注意 underscore 的實(shí)現(xiàn)中有這樣一個(gè)問(wèn)題：

那就是 leading：false 和 trailing: false 不能同時(shí)設(shè)置。

如果同時(shí)設(shè)置的話，比如當(dāng)你將鼠標(biāo)移出的時(shí)候，因?yàn)?trailing 設(shè)置為 false，停止觸發(fā)的時(shí)候不會(huì)設(shè)置定時(shí)器，所以只要再過(guò)了設(shè)置的時(shí)間，再移入的話，就會(huì)立刻執(zhí)行，就違反了 leading: false，bug 就出來(lái)了，所以，這個(gè) throttle 只有三種用法：

container.onmousemove = throttle(getUserAction, 1000);
container.onmousemove = throttle(getUserAction, 1000, {
    leading: false
});
container.onmousemove = throttle(getUserAction, 1000, {
    trailing: false
});

至此我們已經(jīng)完整實(shí)現(xiàn)了一個(gè) underscore 中的 throttle 函數(shù)，恭喜，撒花！

相關(guān)的代碼可以在 Github 博客倉(cāng)庫(kù) 中找到

JavaScript專題系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript專題系列預(yù)計(jì)寫二十篇左右，主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等，特點(diǎn)是研(chao)究(xi) underscore 和 jQuery 的實(shí)現(xiàn)方式。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。