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