函式節流 函式防抖

2022-08-12 20:00:19 字數 807 閱讀 5921

防抖:

適用於input輸入框格式驗證、聯絡詞等。待使用者停止輸入一段時間再發生請求,避免頻繁請求。

實現細節:debounce返回乙個function,關鍵點在於cleartimeout,如果使用者不停輸入,就會一直執行cleartimeout,導致fn無法執行。只有使用者停止x時間後,才會開始執行fn。

<

input

type

="text"

id="ipt"

>

let debounce = (fn, time) =>, (time || 200));

}};document.getelementbyid('ipt').addeventlistener('input', debounce((e) =>, 300));

節流:節流不會像防抖那樣,等使用者行為停止x時間後執行,而是間隔x時間執行一次。

適用於比input、keyup更加頻繁的操作,比如mousemove、scroll、resize、touchmove

實現細節:儲存上次執行的時間點和定時器

<

div

id="rectangle"

>

div>

let throttle = (fn, time) => 

else

, time);}}

};document.getelementbyid('rectangle').addeventlistener('mousemove', throttle((e) =>, 1000));

函式防抖 函式節流

函式節流 乙個函式執行一次後,只有大於設定的執行週期後才會執行第二次。有個需要頻繁觸發的函式,出於優化效能的角度,在規定時間內,只讓函式觸發的第一次生效,後面不生效。節流函式 function throttle fn,delay 200 函式防抖 乙個需要頻繁觸發的函式,在規定時間內,只讓最後一次生...

函式防抖,函式節流

防抖原理 在事件被觸發規定的時間後才執行一次,如果在規定的時間內又一次觸發了事件則重新計時。應用場景 1.scroll事件滾動觸發 2.搜尋框輸入查詢 3.瀏覽器視窗縮放,resize事件 防抖實現 function debounce func,wait,bool wait 立即執行,如果calln...

函式防抖,函式節流

我又雙叒叕來撿起一切的老知識了 今天主要回顧的是 作為為數不多的面試中高頻問題且實際工作經常用到的 函式防抖,節流 首先科普一下函式防抖,節流的概念 函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。函式節流 限制乙個函式在一定時間內只能...