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

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

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

前言

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

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

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

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

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

import { debounce, throttle } from 'lodash'

（2）隨便寫兩個按鈕

<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）隨便寫兩個方法

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

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

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

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

關于Vue的防抖節(jié)流函數(shù)庫或插件已經(jīng)有很多了，這個可以自己搜一下并看看效果如何。那為何還需要自行設計實現(xiàn)防抖節(jié)流？因為有些需求需要定制化設計，同時你還知道了防抖節(jié)流的基本原理。

（2）防抖節(jié)流具體實現(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）隨便寫兩個按鈕

<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）隨便寫兩個方法

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

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