防抖 節流 的區別,以及應用,及其簡單實現

2022-06-29 14:27:11 字數 1293 閱讀 4820

某個動作在觸發n秒之後,再執行**,如果在這n秒內再次被觸發此動作,則重新計時。

適用場景:按鈕提交場景:防止多次提交按鈕,只執行最後提交的一次;搜尋框聯想場景:防止聯想傳送請求,只傳送最後一次輸入。

//簡單實現

function

debounce(func,wait),wait);}}

//

立即執行版實現:立刻執行函式,然後等到停止觸發n秒後,才可以重新執行。新增乙個 立即執行的引數

function

debound1(func,wait,immediate),wait);

if    }

else

,wait);

}}}

//

返回值版實現

//func函式可能會有返回值,所以需要返回函式結果,但是當immediate為false的時候,因為使用了settimeout,值將會一直是undefined

//所以只在immediate為true的時候,執行函式返回的值才有意義

function

debounce2(func, wait, immediate) , wait)

} else

, wait);

}return

result;

}}

2.節流:

規定在乙個單位時間內,只能觸發一次函式。如果這個單位時間內觸發多次函式,只有一次生效

適用場景:

//

使用時間戳實現:使用時間戳,當觸發事件發生的時候,我們取出當前的時間戳,然後減去之前的時間戳(最開始設

值為0),如果大於設定的時間週期,就執行函式,

//然後更新時間戳為當前時間戳,如果小於,就不執行

function

throttle(func, wait)

}}

//

使用定時器實現:當觸發事件的時候,我們沒置乙個定時器,在觸發事件的時候,如果定時器存在,就不執行,若不存在就執行,並給乙個定時器

function

throttlel(func, wait) , wait);

}}}//

區別:節流不管事件觸發多頻繁保證在定時間內「定會執行次函式。防抖是只在最後~次事件觸發後才會執行次函式

const throttle2 = (func, wait) =>, wait);

}}

JS節流 防抖的區別,以及應用場景

函式節流與函式防抖都是為了限制函式的執行次數,以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率,出現延遲 假死或卡頓的現象。函式節流 當持續觸發事件時,每隔一段時間函式就觸發一次,不管在這段時間內,觸發了多少次事件,在這段之間內就只觸發一次。舉個例子,input框中輸入內容,觸發keyup事件,通...

節流和防抖的區別,以及如何實現

防抖觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間 防抖debounce function debounce fn 500 處理函式 function handle 滾動事件 window.addeventlistener scroll debounce hand...

節流和防抖的區別,以及如何實現

防抖 觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間 防抖debounce function debounce fn 500 處理函式 function handle 滾動事件 window.addeventlistener scroll debounce han...