快捷導(dǎo)航

react簡單實(shí)現(xiàn)防抖和節(jié)流

更新時間：2022年05月16日 09:15:41 作者：嘻嘍嘍嘍

在日常開發(fā)中，我們經(jīng)常會有防抖和節(jié)流的需要，可以減小服務(wù)器端壓力，提升用戶體驗(yàn)，本文就詳細(xì)的介紹了react簡單實(shí)現(xiàn)防抖和節(jié)流，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

這時防抖和節(jié)流就派上用場了！！

一、防抖：

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

防止抖動的意思，也就是不抖動時才進(jìn)行相應(yīng)的處理。比如一根拉直的彈簧，我們撥動一下它就會抖動，過一段時間后彈簧會恢復(fù)到平靜的狀態(tài)（從撥動彈簧使其抖動到恢復(fù)平靜的時長就是代碼例子的ms值）。在這個過程中，撥動彈簧的這一行為假設(shè)為事件被觸發(fā)（代碼中的input事件被觸發(fā)），當(dāng)彈簧恢復(fù)平靜時我們再執(zhí)行事件處理函數(shù)（代碼中的sayHi函數(shù)）?；谝陨霞僭O(shè)，當(dāng)我們在彈簧還沒恢復(fù)到平靜狀態(tài)時，又不斷地?fù)軇铀ㄇ宄嗽瓉淼膕etTimeout，并重新開始計時），因?yàn)閺椈蛇€沒恢復(fù)到平靜，那么事件處理函數(shù)就一直不會被執(zhí)行。只有當(dāng)我們撥動它，并且之后再也不動它（也就是最后一次觸發(fā)），等它恢復(fù)到平靜狀態(tài)時（setTimeout時間到達(dá)），事件處理函數(shù)才會被執(zhí)行。

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

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

function debounce(fn, ms) {  //fn:要防抖的函數(shù) ms:時間
    let timerId // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
    return function () {
         timerId && clearTimeout(timerId) // 每當(dāng)用戶輸入的時候把前一個 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ā)事件時都判斷當(dāng)前是否有等待執(zhí)行的延時函數(shù)。
使用的本質(zhì)：允許某一行為觸發(fā)，但是觸發(fā)的頻率不能太高。節(jié)流一般用于動畫相關(guān)的場景。

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

原生：

function throttle(fn, ms) {
     let timerId // 創(chuàng)建一個標(biāo)記用來存放定時器的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簡單實(shí)現(xiàn)防抖和節(jié)流的文章就介紹到這了,更多相關(guān)react 防抖和節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: