JavaScript專題之跟着underscore學防抖

時間 2019-12-13

標籤 javascript 專題跟着 underscore 欄目 JavaScript 简体版

原文原文鏈接

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

前言

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

window 的 resize、scrollgit
mousedown、mousemovegithub
keyup、keydown
……ajax

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

咱們寫個 index.html 文件：瀏覽器

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container{
            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="debounce.js"></script>
</body>

</html>

debounce.js 文件的代碼以下：app

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

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

container.onmousemove = getUserAction;

咱們來看看效果：函數

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

由於這個例子很簡單，因此瀏覽器徹底反應的過來，但是若是是複雜的回調函數或是 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 次!

棒棒噠，咱們接着完善它。

this

若是咱們在 getUserAction 函數中 console.log(this)，在不使用 debounce 函數的時候，this 的值爲：

<div id="container"></div>

可是若是使用咱們的 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 已經能夠正確指向了。讓咱們看下個問題：

event 對象

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 函數，恭喜，撒花！