var count = 1;
var container = document.getElementById('container');
function getUserAction() {
    container.innerHTML = count++;
};
container.onmousemove = getUserAction;

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

container.onmousemove = debounce(getUserAction, 1000);

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

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

我們修改下代碼：

// 第二版
function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

現(xiàn)在 this 已經(jīng)可以正確指向了。讓我們看下個問題：

event 對象

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

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

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

MouseEvent

但是在我們實現(xiàn)的 debounce 函數(shù)中，卻只會打印 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);
    }
}

返回值

再注意一個小點，getUserAction 函數(shù)可能是有返回值的，所以我們也要返回函數(shù)的執(zhí)行結(jié)果

// 第四版
function debounce(func, wait) {
    var timeout, result;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            result = func.apply(context, args)
        }, wait);
        return result;
    }
}

到此為止，我們修復(fù)了三個小問題：

• this 指向

• event 對象

• 返回值

立刻執(zhí)行

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

這個需求就是：

我不希望非要等到事件停止觸發(fā)后才執(zhí)行，我希望立刻執(zhí)行函數(shù)，然后等到停止觸發(fā)n秒后，才可以重新觸發(fā)執(zhí)行。

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

// 第五版
function debounce(func, wait, immediate) {
    var timeout, result;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經(jīng)執(zhí)行過，不再執(zhí)行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                result = func.apply(context, args)
            }, wait);
        }
        return result;
    }
}

取消

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

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

// 第六版
function debounce(func, wait, immediate) {
    var timeout, result;
    var debounced = function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經(jīng)執(zhí)行過，不再執(zhí)行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                result = func.apply(context, args)
            }, wait);
        }
        return result;
    };
    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
}

以上就是“JavaScript怎么實現(xiàn)underscore防抖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。