為了完整閱讀體驗，歡迎移步到我的 "博客原文" 。 防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章： "節流 理解，實踐與實現" 。分開討論防抖和節流，主要是為了讓一些還不太瞭解防抖節流的讀者能夠有針對性地，逐一掌握它們。 防抖有 兩種模 ...
為了完整閱讀體驗，歡迎移步到我的博客原文。
防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節流 - 理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太瞭解防抖節流的讀者能夠有針對性地，逐一掌握它們。
防抖有兩種模式（容易讓人迷惑）：延時執行和直接執行。後續詳細討論。
防抖還有一個關鍵點是如果用代碼實現。本文以循序漸進地方式，先以實現一個簡單案例為例，繪製流程圖，再根據流程圖邏輯編寫防抖功能代碼。
典型案例
以日常開發中常用的搜索按鈕為例，若用戶點擊一次搜索按鈕後，不小心“手抖”很快又點了一次按鈕，防抖可以規避第二次甚至更多次搜索。
第一個搜索按鈕未做任何防抖處理。
搜索按鈕A為第一種防抖模式：延時執行。若用戶連續快速點擊多次，只有最後一次點擊結束，延時一段時間後才執行搜索。
搜索按鈕B為第二種防抖模式：直接執行。若用戶連續快速點擊多次，只有第一次點擊會執行搜索。
防抖是什麼
結合上方案例，防抖可以理解為：多次觸發事件後，事件處理函數只執行一次。
而防抖的兩種模式可以根據實際使用場景分別應用。
應用場景
在搜索框中實時鍵入文本搜索
防止頻繁點擊搜索按鈕觸發搜索請求
點擊查看案例
一步步手寫防抖
接下來我們通過一個案例梳理實現防抖的思路。
假設我們要實現本文第一個案例中搜索按鈕A的功能。首先整理需求：
- 點擊搜索按鈕後，函數並不馬上執行，而是等一段時間再執行。
- 若在這段時間內，按鈕再次被點擊，則重新開始計時，等待同樣一段時間後再執行。
實現的方法有兩種，推薦第一種，用計時器(setTimeout)簡化代碼，將重心放在實現防抖的邏輯上。
方法一核心參數：
- 等待時長
- 計時器
繪製方法一的流程圖：
根據流程圖思路實現方法一的防抖代碼：
function debounce( func, wait = 0 ) {
let timer
function debounced( ...args ) {
const self = this
if ( timer == null ) {
addTimer()
return
}
if ( timer != null ) {
clearTimer()
addTimer()
return
}
function addTimer() {
timer = setTimeout( () => {
invokeFunc()
clearTimer()
}, wait )
}
function invokeFunc() {
func.apply( self, args )
}
}
return debounced
function clearTimer() {
clearTimeout( timer )
timer = null
}
}方法二核心參數：
- 等待時長
- 最早可執行時間
繪製方法二的流程圖：
根據流程圖實現方法二的防抖代碼：
function debounce( func, wait = 0 ) {
// Earliest time when func can be invoked
let earliest
function debounced( ...args ) {
const self = this
if ( typeof earliest === 'undefined' ) {
setEarliset()
}
if ( typeof earliest !== 'undefined' ) {
if ( now() >= earliest ) {
invokeFun()
} else {
setEarliset()
}
}
function setEarliset() {
earliest = now() + wait
}
function invokeFun() {
func.apply( self, args )
}
}
return debounced
function now() {
return +new Date()
}
}同樣，我們可以使用類似方法實現搜索按鈕B的功能。
需求描述：
- 點擊搜索按鈕後，函數馬上執行。只有等待一段時間後被點擊才能執行函數。
- 若在這段時間內按鈕被點擊，則重新計時。
核心參數：
- 等待時長
- 計時器
function debounce( func, wait = 0 ) {
let timer
function debounced( ...args ) {
const self = this
timer == null && invokeFunc()
timer != null && clearTimer()
timer = setTimeout( clearTimer, wait )
function invokeFunc() {
func.apply( self, args )
}
}
return debounced
function clearTimer() {
clearTimeout( timer )
timer = null
}
}接下來我們使用剛纔編寫的debounce函數來測試第一個案例
點擊查看案例
總結
防抖是一個高階函數，能夠將多個事件函數合併為一個，在“調整window尺寸”，“在搜索框中實時搜索鍵入文本”， “滾動滾動條”和“防止搜索按鈕頻繁點擊觸發多餘請求”等案例中，十分有用。
鏈接
- Lodash推薦：https://css-tricks.com/debouncing-throttling-explained-examples
- 簡單理解防抖定義：https://www.cnblogs.com/woodyblog/p/6238445.html
如果本文幫助到了你，我也十分榮幸, 歡迎點贊和收藏。如果有任何疑問或者建議，都歡迎在下方評論區提出。期待你的真知灼見。
