快捷導(dǎo)航

Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例

更新時(shí)間：2024年04月14日 15:55:16 作者：帥龍之龍

防抖節(jié)流是可以說(shuō)是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下

前言

防抖節(jié)流是可以說(shuō)是一種優(yōu)化組件性能的技巧，可以有效減少組件中的渲染次數(shù)和計(jì)算量，從而提高組件的響應(yīng)速度和用戶(hù)體驗(yàn)。在Vue3中可以使用`lodash`庫(kù)中的`debounce`和`throttle`函數(shù)來(lái)分別實(shí)現(xiàn)防抖和節(jié)流。當(dāng)然也可以自行設(shè)計(jì)實(shí)現(xiàn)防抖節(jié)流函數(shù)，調(diào)用方式都差不多。

防抖：在一定時(shí)間內(nèi)，多次觸發(fā)同一事件，只執(zhí)行最后一次操作，常用于輸入框搜索、滾動(dòng)加載等場(chǎng)景。

節(jié)流：在一定時(shí)間內(nèi)，多次觸發(fā)同一事件，限制函數(shù)執(zhí)行頻率，防止函數(shù)被頻繁調(diào)用，從而提高頁(yè)面性能。

一、基于Vue3內(nèi)置的lodash函數(shù)庫(kù)實(shí)現(xiàn)防抖節(jié)流

（1）首先導(dǎo)入lodash函數(shù)庫(kù)的防抖和節(jié)流方法

import { debounce, throttle } from 'lodash'

（2）隨便寫(xiě)兩個(gè)按鈕

<el-button size="small" type="primary" @click="handleDebounceClick($event)">
  <el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon>
  <small>防抖·籃球</small>
</el-button>

<el-button size="small" type="primary" @click="handleThrottleClick($event)">
  <el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon>
  <small>節(jié)流·足球</small>
</el-button>

（3）隨便寫(xiě)兩個(gè)方法

/**
 * 防抖·籃球
 */
const handleDebounceClick = debounce((evt) => {
  // ---- ^ 業(yè)務(wù)邏輯 ----
  // 定義fn方法
  const fn = (evt) => {
    console.log('debounce =>', evt)
  }
  // 調(diào)用fn方法
  fn(evt)
  // ---- / 業(yè)務(wù)邏輯 ----
}, 1000)

/**
 * 節(jié)流·足球
 */
const handleThrottleClick = throttle((evt) => {
  // ---- ^ 業(yè)務(wù)邏輯 ----
  // 定義fn方法
  const fn = (evt) => {
    console.log('throttle =>', evt)
  }
  // 調(diào)用fn方法
  fn(evt)
  // ---- / 業(yè)務(wù)邏輯 ----
}, 1000)

二、自行設(shè)計(jì)實(shí)現(xiàn)的防抖節(jié)流函數(shù)

（1）自行設(shè)計(jì)實(shí)現(xiàn)防抖節(jié)流的好處

關(guān)于Vue的防抖節(jié)流函數(shù)庫(kù)或插件已經(jīng)有很多了，這個(gè)可以自己搜一下并看看效果如何。那為何還需要自行設(shè)計(jì)實(shí)現(xiàn)防抖節(jié)流？因?yàn)橛行┬枨笮枰ㄖ苹O(shè)計(jì)，同時(shí)你還知道了防抖節(jié)流的基本原理。

（2）防抖節(jié)流具體實(shí)現(xiàn)

/**
 * 防抖
 */
const debounce = (fn, time) => {
  let timer = null
  return (...args) => {
    const context = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.call(context, ...args)
    }, time)
  }
}

/**
 * 節(jié)流
 */
const throttle = (fn, time) => {
  let activeTime = null
  return (...args) => {
    const context = this
    const current = Date.now()
    if (current - activeTime >= time) {
      fn.call(context, ...args)
      activeTime = Date.now()
    }
  }
}

（2）隨便寫(xiě)兩個(gè)按鈕

<el-button size="small" type="primary" @click="handleDebounceClick($event, '你好')">
  <el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon>
  <small>防抖·籃球</small>
</el-button>

<el-button size="small" type="primary" @click="handleThrottleClick($event, '世界')">
  <el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon>
  <small>節(jié)流·足球</small>
</el-button>

（3）隨便寫(xiě)兩個(gè)方法

/**
 * 防抖·籃球
 */
const handleDebounceClick = debounce((evt, str) => {
  // ---- ^ 業(yè)務(wù)邏輯 ----
  // 定義fn方法
  const fn = (evt) => {
    console.log('debounce =>', evt, str)
  }
  // 調(diào)用fn方法
  fn(evt)
  // ---- / 業(yè)務(wù)邏輯 ----
}, 1000)

/**
 * 節(jié)流·足球
 */
const handleThrottleClick = throttle((evt, str) => {
  // ---- ^ 業(yè)務(wù)邏輯 ----
  // 定義fn方法
  const fn = (evt) => {
    console.log('throttle =>', evt, str)
  }
  // 調(diào)用fn方法
  fn(evt)
  // ---- / 業(yè)務(wù)邏輯 ----
}, 1000)

三、運(yùn)行效果

極致防抖和節(jié)流在以下場(chǎng)景中可以發(fā)揮作用：

1. 表單輸入：
當(dāng)用戶(hù)在輸入框中連續(xù)輸入時(shí)，可以使用極致防抖來(lái)延遲觸發(fā)輸入事件的處理，避免頻繁的計(jì)算和請(qǐng)求。

2. 滾動(dòng)加載：
當(dāng)用戶(hù)滾動(dòng)頁(yè)面時(shí)，可以使用節(jié)流來(lái)限制觸發(fā)滾動(dòng)事件的頻率，以減少滾動(dòng)事件的處理次數(shù)，提高性能。

3. 頻繁點(diǎn)擊：
當(dāng)用戶(hù)頻繁點(diǎn)擊某個(gè)按鈕或鏈接時(shí)，可以使用極致防抖來(lái)確保只有最后一次點(diǎn)擊被處理，避免重復(fù)操作。

4. 鼠標(biāo)移動(dòng)：
當(dāng)用戶(hù)鼠標(biāo)在頁(yè)面上移動(dòng)時(shí)，可以使用節(jié)流來(lái)限制觸發(fā)鼠標(biāo)移動(dòng)事件的頻率，以減少事件的處理次數(shù)。

優(yōu)點(diǎn)：

提高性能：極致防抖和節(jié)流可以減少不必要的計(jì)算和請(qǐng)求，從而提高頁(yè)面的響應(yīng)速度和性能。

減少資源消耗：限制函數(shù)的執(zhí)行頻率可以減少資源的消耗，如網(wǎng)絡(luò)帶寬、CPU計(jì)算等。
提升用戶(hù)體驗(yàn)：通過(guò)減少不必要的操作和事件處理，可以提升用戶(hù)的體驗(yàn)和滿(mǎn)意度。

缺點(diǎn)：

可能會(huì)延遲實(shí)際操作：由于極致防抖和節(jié)流會(huì)延遲函數(shù)的執(zhí)行，可能會(huì)導(dǎo)致用戶(hù)在某些情況下感覺(jué)到操作的延遲。

需要權(quán)衡延遲時(shí)間：選擇合適的延遲時(shí)間是一個(gè)挑戰(zhàn)，如果延遲時(shí)間設(shè)置過(guò)長(zhǎng)，可能會(huì)導(dǎo)致用戶(hù)體驗(yàn)不佳；如果設(shè)置過(guò)短，可能會(huì)導(dǎo)致頻繁的函數(shù)執(zhí)行。

在實(shí)際應(yīng)用中，需要根據(jù)具體的場(chǎng)景和需求來(lái)選擇使用極致防抖還是節(jié)流，以及適當(dāng)調(diào)整延遲時(shí)間。同時(shí)，需要注意權(quán)衡延遲時(shí)間和用戶(hù)體驗(yàn)之間的平衡，以及對(duì)性能的影響。

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

您可能感興趣的文章: