跟著underscore學防抖
- 2019 年 10 月 4 日
- 筆記
前言
在前端開發中會遇到一些頻繁的事件觸發，比如：
window 的 resize、scroll mousedown、mousemove keyup、keydown ……
為此，我們舉個示例程式碼來了解事件如何頻繁的觸發：
我們寫個 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 文件的程式碼如下：
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);
頓時就從 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 函數，恭喜，撒花！
參考文章：https://github.com/mqyqingfeng/Blog/issues/22
