導語：
最近整理面試題目，經常能夠看到手寫節流和防抖函式，已經它們的用處。一分鐘學會它們。

微信搜尋 【web小館】，回覆 ”全棧部落格專案“，即可獲取 專案原始碼和後續的實戰文章教程。

一，防抖

1，定義和原理

• 定義：防抖，即如果短時間內大量觸發同一事件，都會重置計時器，等到事件不觸發了，再等待規定的事件，才會執行函式。

（舉個簡單的例子，就是如果你在我這篇博文瘋狂點贊再取消贊，這個過程都會把計時器清空，等到你點累了不點了，等待0.5秒，才會觸發函式，把你最終結果傳給伺服器。）而這整個過程就觸發了一次點贊函式到伺服器。

• 原理：設定一個定時器，設定在規定的時間後觸發事件處理，每次觸發事件都會重置計時器。

2，用處

防抖用於搜尋框和滾動的監聽事件處理，如果沒有防抖，那麼每輸入一個字或者滾動螢幕，都會觸發事件，甚至一秒鐘觸發幾十次，效能就會浪費。

function debounce(fn, delay = 500) {
    
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)			//如果timer有定義，清空
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

一，節流

1，定義和原理

• 定義：每隔一段時間就執行一次。
• 原理：設定一個定時器，設定0.5秒後執行事件，如果時間到了，就會執行函式並重置定時器，等待下一個0.5秒後再執行。

2，用處

滾動欄的位置查詢，就能設定每0.5秒執行一次函式。

function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

結語：

建議收藏，不然刷著刷著就可能找不到了。

有什麼前端的問題歡迎私信我~期待你的到來。

同時你的點贊是對我最大的鼓勵，謝謝。