javascript中的防抖與節流

防抖與節流是在實際開發中使用較多的功能，雖然平時咱們可使用lodash提供的功能方法，可是爲了知其因此然，咱們仍是須要了解下它的實現原理。

1. 防抖 （debounce）

做用：防抖顧名思義就是防止抖動，如比一個常見的使用場景，當咱們填完用戶名密碼後須要點擊登陸按鈕，若是個人手抖動了一下，按了兩次登陸按鈕，是否是就會請求兩次登陸接口呢，因此爲了節約網絡資源，防止沒必要要的網絡開銷，防抖是必不可少的。（咱們能夠通俗的記憶： 防抖是爲了防止手抖，觸發屢次事件，它的目的是讓事件在指定時間只觸發一次）。

分類：即時觸發和延時觸發

即時觸發：第一次點擊時候即執行事件，後面每次點擊都會刷新下次再生效的時間。

延時觸發：每次點擊都會刷新下次生效的時間，當到時間後就會觸發一次事件。

經過文字說可能理解有點困難，下面咱們仍是上代碼。

即時觸發

function debounce(fn, wait) {
    let timer = null;
　　 let context = null;

    return function () {
        context = this;
        !timer && fn(context, ...arguments);

        if (timer) {
            clearTimeout(timer);
            timer = null;
        }

        timer = setTimeout(() => {
            clearTimeout(timer);
            timer = null;
        }, wait);
    }
}

延時觸發

function delayDebounce(fn, wait) {
    let timer = null;
　　 let context = null;

    return function() {
　　　　  context = this;

        if(timer) {
            clearTimeout(timer);
            timer = null;
        }

        timer = setTimeout(() => {
            fn(context, ...arguments);
            clearTimeout(timer);
            timer = null;
        }, wait);
    }
}

下面咱們將這兩個方法合併下，添加參數進行區別。

function debounce(fn, wait, immediate = true) {

    let timer = null;

    let context = null;

    return function () {

        context = this;

        if (immediate) {

            !timer && fn.call(context, ...arguments);

        }

        if (timer) {

            clearTimeout(timer);

            timer = null;

        }

        timer = setTimeout(() => {

            !immediate && fn(context, ...arguments)

            clearTimeout(timer);

            timer = null;

        }, wait);

    }

}

 

2. 節流

做用：顧名思義，節流就是節約流動。咱們常常見到的一個使用場景就是春節期間各大公司開發的搶紅包功能，須要咱們不停的點擊按鈕，爲了減小網絡請求，咱們就能夠減小請求次數，讓網絡請求減小，一樣達到減小網絡開銷的問題。（對比防抖，咱們能夠這樣記憶：節流是減小網絡請求次數，可是實際仍是觸發屢次）。

節流也分爲即時執行版本和延時執行版本。

即時執行

function throttling(fn, wait) {
    let timer = null;
    let context = this;

    return function () {
        !timer && fn.call(context, ...arguments);

        if (!timer) {
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null;
            }, wait);
        }
    }
}

延時執行

function throttling(fn, wait, immediate = true) {
    let timer = null;
    let context = this;

    return function () {
        if (immediate) {
            !timer && fn.call(context, ...arguments);
        }

        if (!timer) {
            timer = setTimeout(() => {
                !immediate && fn.call(context, ...arguments);
                clearTimeout(timer);
                timer = null;
            }, wait);
        }
    }
}

 

淺陋見識，不足之處，請大神指正。