快捷導(dǎo)航

解讀函數(shù)的節(jié)流與防抖問題

更新時(shí)間：2022年12月09日 11:04:03 作者：Agwenbi

這篇文章主要介紹了解讀函數(shù)的節(jié)流與防抖問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

函數(shù)的節(jié)流與防抖

1、節(jié)流

節(jié)流的意思是，規(guī)定時(shí)間內(nèi)，只觸發(fā)一次。比如我們?cè)O(shè)定500ms，在這個(gè)時(shí)間內(nèi)，無論點(diǎn)擊按鈕多少次，它都只會(huì)觸發(fā)一次。具體場景可以是搶購時(shí)候，由于有無數(shù)人快速點(diǎn)擊按鈕，如果每次點(diǎn)擊都發(fā)送請(qǐng)求，就會(huì)給服務(wù)器造成巨大的壓力，但是我們進(jìn)行節(jié)流后，就會(huì)大大減少請(qǐng)求的次數(shù)。

2、防抖

防抖的意思是，在連續(xù)的操作中，無論進(jìn)行了多長時(shí)間，只有某一次的操作后在指定的時(shí)間內(nèi)沒有再操作，這一次才被判定有效。具體場景可以搜索框輸入關(guān)鍵字過程中實(shí)時(shí) 請(qǐng)求服務(wù)器匹配搜索結(jié)果，如果不進(jìn)行處理，那么就是輸入框內(nèi)容一直變化，導(dǎo)致一直發(fā)送請(qǐng)求。如果進(jìn)行防抖處理，結(jié)果就是當(dāng)我們輸入內(nèi)容完成后，一定時(shí)間(比如500ms)沒有再輸入內(nèi)容，這時(shí)再觸發(fā)請(qǐng)求。

//防抖
export const debounce = (() => {
  let timer = null
  return (callback, wait = 200) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()
/*xxx.vue中使用
methods: {
  loadList() {
    debounce(() => {
      console.log('加載數(shù)據(jù)')
    }, 500)
  }
}
*/
// 節(jié)流
export const throttle = (() => {
  let last = 0
  return (callback, wait = 200) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})()

函數(shù)防抖和函數(shù)節(jié)流及其使用場景

1、為什么會(huì)使用到函數(shù)防抖和函數(shù)節(jié)流

我們?cè)谄綍r(shí)代碼的開發(fā)過程中，會(huì)有很多場景會(huì)頻繁觸發(fā)事件，比如說搜索框?qū)崟r(shí)發(fā)請(qǐng)求，onmousemove, resize, onscroll等等，有些時(shí)候，我們并不想頻繁觸發(fā)事件，這時(shí)候就可以用到函數(shù)防抖和函數(shù)節(jié)流。

2、什么是函數(shù)防抖和函數(shù)節(jié)流?

函數(shù)防抖：如果一個(gè)事件被頻繁執(zhí)行多次，并且觸發(fā)的時(shí)間間隔過短，則防抖函數(shù)可以使得對(duì)應(yīng)的事件處理函數(shù)，只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個(gè)順序的調(diào)用合并成一次。

函數(shù)節(jié)流：如果一個(gè)事件被頻繁觸發(fā)多次，節(jié)流函數(shù)可以按照固定的頻率去執(zhí)行相應(yīng)的事件處理方法。函數(shù)節(jié)流保證一個(gè)事件一定事件內(nèi)只能執(zhí)行一次。

函數(shù)防抖（debounce）

單位時(shí)間內(nèi)，頻繁觸發(fā)事件，只會(huì)觸發(fā)最后一次
經(jīng)典應(yīng)用場景：輸入框輸入事件
減少觸發(fā)輸入的頻率，提高代碼性能

函數(shù)節(jié)流 (throttle)

函數(shù)節(jié)流 : 單位時(shí)間內(nèi)，頻繁觸發(fā)事件，只會(huì)觸發(fā)一次
經(jīng)典應(yīng)用場景：降低高頻事件觸發(fā)頻率
滾動(dòng)條事件：onscroll 鼠標(biāo)移動(dòng)：onmousemove

函數(shù)防抖流程：

(1) 聲明全局變量記錄本次觸發(fā)時(shí)間
(2) 每一次觸發(fā)事件, 獲取當(dāng)前時(shí)間
(3) 判斷當(dāng)前時(shí)間-上一次觸發(fā)時(shí)間>=節(jié)流間隔時(shí)間
(4) 存儲(chǔ)本次觸發(fā)事件，用于下一次判斷

3、代碼

函數(shù)防抖

//函數(shù)防抖使用場景：【永遠(yuǎn)在執(zhí)行最后一次】回到頂部，立即（實(shí)時(shí)）搜索

// debounce() 函數(shù)進(jìn)入頁面立即執(zhí)行

// debounce() 必須返回函數(shù) 事件只能調(diào)用函數(shù)

而它的效果如下圖

沒有加防抖的話，鼠標(biāo)進(jìn)行滑動(dòng)時(shí)一直變化，也一直調(diào)用，運(yùn)行壓力大。加了防抖后，鼠標(biāo)滑動(dòng)不會(huì)調(diào)用，當(dāng)滑動(dòng)停止，則調(diào)用一次，大大降低了運(yùn)行壓力。

函數(shù)節(jié)流

// 所有的數(shù)據(jù)請(qǐng)求【按鈕】下拉刷新

而它的效果圖如下

只要滑動(dòng)事件出現(xiàn)，就會(huì)每1.5秒調(diào)用一次

總結(jié)

1. 相同點(diǎn)：

都可以通過使用setTimeout或者時(shí)間戳實(shí)現(xiàn)。
目的都是，降低回調(diào)執(zhí)行頻率，節(jié)省計(jì)算資源。

2. 不同點(diǎn)：

函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次。
函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時(shí)間只執(zhí)行一次，側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: