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

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

這時(shí)防抖和節(jié)流就派上用場(chǎng)了！！

一、防抖：

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

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

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

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

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

二、節(jié)流

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

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

原生：

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

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

最新評(píng)論