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

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

這時防抖和節(jié)流就派上用場了?。?/p>

一、防抖：

防抖：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間。
思路：每次觸發(fā)事件時都取消之前的延時調(diào)用方法。
使用的本質(zhì)：不允許某一行為觸發(fā)。一般用于input輸入框

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

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

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

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

二、節(jié)流

節(jié)流： 高頻事件觸發(fā)，但在n秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率。
思路：每次觸發(fā)事件時都判斷當前是否有等待執(zhí)行的延時函數(shù)。
使用的本質(zhì)：允許某一行為觸發(fā)，但是觸發(fā)的頻率不能太高。節(jié)流一般用于動畫相關(guān)的場景。

實現(xiàn)方法：可以借助react的ahooks庫的useThrottle或者是lodash庫中的_.throttle來節(jié)流

原生：

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

到此這篇關(guān)于react簡單實現(xiàn)防抖和節(jié)流的文章就介紹到這了,更多相關(guān)react 防抖和節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論