react簡單實現防抖和節流

Posted on by

防抖和節流可以節省資源，減小服務器端壓力，提升用戶體驗。

在日常開發中，我們經常會有這樣的需求：監聽用戶的輸入（keyup、keydown）、瀏覽器窗口調整大小和滾動行為（resize）、鼠標的移動行為（mousemove）等。如果這些事件一觸發我們就執行相應的事件處理函數的話，那將會造成較大的資源浪費或者給用戶帶來不好的體驗。

這時防抖和節流就派上用場瞭！！

一、防抖：

防抖：觸發高頻事件後n秒內函數隻會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。
思路：每次觸發事件時都取消之前的延時調用方法。
使用的本質：不允許某一行為觸發。一般用於input輸入框

防止抖動的意思，也就是不抖動時才進行相應的處理。比如一根拉直的彈簧，我們撥動一下它就會抖動，過一段時間後彈簧會恢復到平靜的狀態（從撥動彈簧使其抖動到恢復平靜的時長就是代碼例子的ms值）。在這個過程中，撥動彈簧的這一行為假設為事件被觸發（代碼中的input事件被觸發），當彈簧恢復平靜時我們再執行事件處理函數（代碼中的sayHi函數）。基於以上假設，當我們在彈簧還沒恢復到平靜狀態時，又不斷地撥動它（清除瞭原來的setTimeout，並重新開始計時），因為彈簧還沒恢復到平靜，那麼事件處理函數就一直不會被執行。隻有當我們撥動它，並且之後再也不動它（也就是最後一次觸發），等它恢復到平靜狀態時（setTimeout時間到達），事件處理函數才會被執行。

實現方法：可以借助react的ahooks庫的useDebounce或者是lodash庫中的_.debounce防抖

原生：（利用閉包中變量不會被銷毀內存的原理）

function debounce(fn, ms) {  //fn:要防抖的函數 ms:時間
    let timerId // 創建一個標記用來存放定時器的返回值
    return function () {
         timerId && clearTimeout(timerId) // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        // 然後又創建一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數
        timerId = setTimeout(() => { 
             fn.apply(this, arguments)
         }, ms)
     }
 }

二、節流

節流： 高頻事件觸發，但在n秒內隻會執行一次，所以節流會稀釋函數的執行頻率。
思路：每次觸發事件時都判斷當前是否有等待執行的延時函數。
使用的本質：允許某一行為觸發，但是觸發的頻率不能太高。節流一般用於動畫相關的場景。

實現方法：可以借助react的ahooks庫的useThrottle或者是lodash庫中的_.throttle來節流

原生：

function throttle(fn, ms) {
     let timerId // 創建一個標記用來存放定時器的id
     return function () {
         // 沒有定時器等待執行，則表示可以創建新的定時器來執行函數
        if (!timerId) {
             timerId = setTimeout(() => {
                 // 定時器id清空，表示可以執行下一次調用瞭
                timerId = null
                 fn.apply(this, arguments)
             }, ms)
         }
     }
 }

到此這篇關於react簡單實現防抖和節流的文章就介紹到這瞭,更多相關react 防抖和節流內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：