前言
防抖和節流算是非常普及的概念了，不止在前端，甚至不止在編程領域，許許多多的地方都能用到這兩個概念，這篇文章主要總結分享一下我自己在JS中對這兩個概念的代碼實現。
防抖
防抖顧名思義就是防止或消除抖動，我第一次接觸這個概念還是是當初大學學單片機的時候。在前端的領域里面，這個概念可以理解為一個高頻率的事件只有在停止觸發一定時間后才會執行對應的處理函數，比較常見的場景就是文本框輸入時觸發的事件。比如輸入文字自動搜索的功能，我們在搜索時一般希望輸入完一個詞組或一個句子后自動進行搜索，而不是每輸入一個字或是一個字面后就搜索一次，這里就需要應用到防抖。只有用戶停止輸入后才會執行事件
代碼也很簡單:
function debounce(fn, time) {
let timer = null
return () => {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, time)
}
}
在這里只有事件停止觸發一定時間后才會執行處理函數,如果等待時間內又一次觸發時間,那么會重新計時。
節流
節流在這里也是限制高頻事件的觸發,節流規定了一個單位時間，在這個單位時間內只能觸發一次。
防抖和節流的區別用文本框輸入文字來演示的話,假如時間都設置為1s,用戶不斷輸入文字,防抖的話是停止輸入1s后函數執行,只執行一次。節流則是在用戶輸入期間,每隔一秒執行一次函數,可能會執行多次。
function throttle(fn, time) {
let oldTime = 0
return () => {
const newTime = new Date()
if (newTime - oldTime >= wait) {
fn()
oldTime = newTime
}
}
}
小結
在這里防抖和節流只給出了最簡單的代碼,如果實際的函數更加復雜,需要考慮到執行上下文的話,那就要用到call或者apply函數來指定this的指向。這個到時候就需要根據實際情況具體分析了。
