函式防抖和節流(一) 防抖函式

2021-10-14 11:51:52 字數 788 閱讀 3700

一.什麼是函式防抖?

1、概念:函式防抖(debounce),就是指觸發事件後,在延遲時間內函式只能執行一次,如果觸發事件後在延遲時間內又觸發了事件,則會重新計算函式延執行時間。等延遲時間計時完畢,則執行目標**。

2、例如:

坐電梯的時候,如果電梯檢測到有人進來(觸發事件),就會多等待 10 秒,此時如果又有人進來(10秒之內重複觸發事件),那麼電梯就會再多等待 10 秒。在上述例子中,電梯在檢測到有人進入 10 秒鐘之後,才會關閉電梯門開始執行。

因此,「函式防抖」的關鍵在於,在乙個事件發生一定時間之後,才執行特定動作

3、**實現:

function

debounce

(fun, wait)

; timer =

settimeout((

)=>

, wait);}

}

4、函式防抖的要點就是:使用settimeout延遲需要執行的目標**(函式fun),當事件被多次觸發時,使用cleartimeout 清除,清除的同時就沒有執行目標**(函式fun),重新開始計時。若延遲時間內事件沒有被重新觸發,等延遲時間計時完畢,則執行目標**

每一篇乙個小知識點,that』s all,thank you.

防抖與節流方案 函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...