防抖與節流
防抖(Debounce)和節流(Throttle)是前端開發中常用的一種技術,主要用于優化性能和提升用戶體驗。
防抖(Debounce)
理解:在事件被觸發 n 秒后再執行回調,如果在這 n 秒內事件又被觸發,則重新計時。
實現:通過設置定時器實現。當事件觸發時,定時器到達指定時間后執行操作。如果在定時器到達之前再次觸發事件,則清除之前的定時器并重新設置一個新的定時器,然后重新計時。?
應用場景:輸入框搜索、窗口大小調整、按鈕點擊、滾動條滾動等。
// 定義防抖函數
function debounce(fn, delay) {
let timer = null
return function () {
const _self = this
const args = arguments
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(_self, args)
}, delay)
}
}
// html部分
<input type="text" id="inp" placeholder="請輸入搜索" />
// 使用防抖函數
const inp = document.getElementById('inp')
inp.oninput = debounce(onInputChange, 1000) // 輸入框輸入時,1秒后執行onInputChange函數
function onInputChange(e) {
console.log(e.target.value)
}
節流(Throttle)
理解:規定在一個單位時間 n 內,只能觸發一次函數。如果這個單位時間 n 內觸發多次函數,只有一次生效。
實現:可以通過定時器實現。首次觸發時設置定時器,定時器到達時間后執行操作,而且定時器清空。如果在定時器到達前再次觸發事件,則無視此次觸發事件。?
應用場景:拖拽、鼠標移動、表單驗證等
// 節流函數
function throttle(fn, delay) {
let timer = null
return function () {
const _self = this
const args = arguments
if (timer) return
timer = setTimeout(() => {
fn.apply(_self, args)
timer = null
}, delay)
}
}
// html部分
<input type="submit" value="提交" onclick="onSubmit(event)" /
// 使用節流函數
function submitEvent(e) {
console.log(e.target.value)
}
const onSubmit = throttle(submitEvent, 1000) // 點擊提交按鈕,1秒內只能提交一次
從上面的代碼可以看出,防抖與節流都是基于閉包來實現的。

浙公網安備 33010602011771號