摘要：專題系列預計寫二十篇左右，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究和的實現方式。如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。

JavaScript 專題系列第一篇，講解防抖，帶你從零實現一個 underscore 的 debounce 函數

在前端開發中會遇到一些頻繁的事件觸發，比如：

window 的 resize、scroll

mousedown、mousemove

keyup、keydown
……

為此，我們舉個示例代碼來了解事件如何頻繁的觸發：

我們寫個 index.html 文件：

debounce.js 文件的代碼如下：

var count = 1;
var container = document.getElementById("container");

function getUserAction() {
    container.innerHTML = count++;
};

container.onmousemove = getUserAction;

我們來看看效果：

從左邊滑到右邊就觸發了 165 次 getUserAction 函數！

因為這個例子很簡單，所以瀏覽器完全反應的過來，可是如果是復雜的回調函數或是 ajax 請求呢？假設 1 秒觸發了 60 次，每個回調就必須在 1000 / 60 = 16.67ms 內完成，否則就會有卡頓出現。

為了解決這個問題，一般有兩種解決方案：

debounce 防抖

throttle 節流

今天重點講講防抖的實現。

防抖的原理就是：你盡管觸發事件，但是我一定在事件觸發 n 秒后才執行，如果你在一個事件觸發的 n 秒內又觸發了這個事件，那我就以新的事件的時間為準，n 秒后才執行，總之，就是要等你觸發完事件 n 秒內不再觸發事件，我才執行，真是任性吶!

根據這段表述，我們可以寫第一版的代碼：

// 第一版
function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

如果我們要使用它，以最一開始的例子為例：

container.onmousemove = debounce(getUserAction, 1000);

現在隨你怎么移動，反正你移動完 1000ms 內不再觸發，我才執行事件。看看使用效果：

頓時就從 165 次降低成了 1 次!

棒棒噠，我們接著完善它。

如果我們在 getUserAction 函數中 console.log(this)，在不使用 debounce 函數的時候，this 的值為：

但是如果使用我們的 debounce 函數，this 就會指向 Window 對象！

所以我們需要將 this 指向正確的對象。

我們修改下代碼：

// 第二版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

現在 this 已經可以正確指向了。讓我們看下個問題：

JavaScript 在事件處理函數中會提供事件對象 event，我們修改下 getUserAction 函數：

function getUserAction(e) {
    console.log(e);
    container.innerHTML = count++;
};

如果我們不使用 debouce 函數，這里會打印 MouseEvent 對象，如圖所示：

但是在我們實現的 debounce 函數中，卻只會打印 undefined!

所以我們再修改一下代碼：

// 第三版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

到此為止，我們修復了兩個小問題：

this 指向

event 對象

這個時候，代碼已經很是完善了，但是為了讓這個函數更加完善，我們接下來思考一個新的需求。

這個需求就是：

我不希望非要等到事件停止觸發后才執行，我希望立刻執行函數，然后等到停止觸發 n 秒后，才可以重新觸發執行。

想想這個需求也是很有道理的嘛，那我們加個 immediate 參數判斷是否是立刻執行。

// 第四版
function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經執行過，不再執行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

再來看看使用效果：

此時注意一點，就是 getUserAction 函數可能是有返回值的，所以我們也要返回函數的執行結果，但是當 immediate 為 false 的時候，因為使用了 setTimeout ，我們將 func.apply(context, args) 的返回值賦給變量，最后再 return 的時候，值將會一直是 undefined，所以我們只在 immediate 為 true 的時候返回函數的執行結果。

// 第五版
function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經執行過，不再執行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    }
}

最后我們再思考一個小需求，我希望能取消 debounce 函數，比如說我 debounce 的時間間隔是 10 秒鐘，immediate 為 true，這樣的話，我只有等 10 秒后才能重新觸發事件，現在我希望有一個按鈕，點擊后，取消防抖，這樣我再去觸發，就可以又立刻執行啦，是不是很開心？

為了這個需求，我們寫最后一版的代碼：

// 第六版
function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經執行過，不再執行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

那么該如何使用這個 cancel 函數呢？依然是以上面的 demo 為例：

var count = 1;
var container = document.getElementById("container");

function getUserAction(e) {
    container.innerHTML = count++;
};

var setUseAction = debounce(getUserAction, 10000, true);

container.onmousemove = setUseAction;

document.getElementById("button").addEventListener("click", function(){
    setUseAction.cancel();
})

演示效果如下：

至此我們已經完整實現了一個 underscore 中的 debounce 函數，恭喜，撒花！

相關的代碼可以在 Github 博客倉庫 中找到

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

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

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。