Vue3项目中使用防抖节流的实现示例

更新时间：2024年04月14日 15:55:16 作者：帅龍之龍

防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,本文主要介绍了Vue3项目中使用防抖节流的实现示例,感兴趣的可以了解一下

前言

防抖节流是可以说是一种优化组件性能的技巧，可以有效减少组件中的渲染次数和计算量，从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数，调用方式都差不多。

防抖：在一定时间内，多次触发同一事件，只执行最后一次操作，常用于输入框搜索、滚动加载等场景。

节流：在一定时间内，多次触发同一事件，限制函数执行频率，防止函数被频繁调用，从而提高页面性能。

一、基于Vue3内置的lodash函数库实现防抖节流

（1）首先导入lodash函数库的防抖和节流方法

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>节流·足球</small>
</el-button>

（3）随便写两个方法

/**
 * 防抖·篮球
 */
const handleDebounceClick = debounce((evt) => {
  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {
    console.log('debounce =>', evt)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

/**
 * 节流·足球
 */
const handleThrottleClick = throttle((evt) => {
  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {
    console.log('throttle =>', evt)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

二、自行设计实现的防抖节流函数

（1）自行设计实现防抖节流的好处

关于Vue的防抖节流函数库或插件已经有很多了，这个可以自己搜一下并看看效果如何。那为何还需要自行设计实现防抖节流？因为有些需求需要定制化设计，同时你还知道了防抖节流的基本原理。

（2）防抖节流具体实现

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

/**
 * 节流
 */
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>节流·足球</small>
</el-button>

（3）随便写两个方法

/**
 * 防抖·篮球
 */
const handleDebounceClick = debounce((evt, str) => {
  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {
    console.log('debounce =>', evt, str)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

/**
 * 节流·足球
 */
const handleThrottleClick = throttle((evt, str) => {
  // ---- ^ 业务逻辑 ----
  // 定义fn方法
  const fn = (evt) => {
    console.log('throttle =>', evt, str)
  }
  // 调用fn方法
  fn(evt)
  // ---- / 业务逻辑 ----
}, 1000)

三、运行效果

极致防抖和节流在以下场景中可以发挥作用：

1. 表单输入：
当用户在输入框中连续输入时，可以使用极致防抖来延迟触发输入事件的处理，避免频繁的计算和请求。

2. 滚动加载：
当用户滚动页面时，可以使用节流来限制触发滚动事件的频率，以减少滚动事件的处理次数，提高性能。

3. 频繁点击：
当用户频繁点击某个按钮或链接时，可以使用极致防抖来确保只有最后一次点击被处理，避免重复操作。

4. 鼠标移动：
当用户鼠标在页面上移动时，可以使用节流来限制触发鼠标移动事件的频率，以减少事件的处理次数。

优点：

提高性能：极致防抖和节流可以减少不必要的计算和请求，从而提高页面的响应速度和性能。

减少资源消耗：限制函数的执行频率可以减少资源的消耗，如网络带宽、CPU计算等。
提升用户体验：通过减少不必要的操作和事件处理，可以提升用户的体验和满意度。

缺点：

可能会延迟实际操作：由于极致防抖和节流会延迟函数的执行，可能会导致用户在某些情况下感觉到操作的延迟。

需要权衡延迟时间：选择合适的延迟时间是一个挑战，如果延迟时间设置过长，可能会导致用户体验不佳；如果设置过短，可能会导致频繁的函数执行。

在实际应用中，需要根据具体的场景和需求来选择使用极致防抖还是节流，以及适当调整延迟时间。同时，需要注意权衡延迟时间和用户体验之间的平衡，以及对性能的影响。

到此这篇关于Vue3项目中使用防抖节流的实现示例的文章就介绍到这了,更多相关Vue3 防抖节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

对vue中v-if的常见使用方法详解
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现表单未编辑或未保存离开弹窗提示功能
这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
解决vue更新路由router-view复用组件内容不刷新的问题
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue3自定义指令实现按钮防抖示例详解
这篇文章主要为大家介绍了vue3自定义指令实现按钮防抖示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue插件之滑动验证码
这篇文章主要为大家详细绍介绍了Vue插件之滑动验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
关于VanCascader默认值(地址code转换)
这篇文章主要介绍了关于VanCascader默认值(地址code转换),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
在线使用iconfont字体图标的简单实现
这篇文章主要介绍了在线使用iconfont字体图标的简单实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Nuxt引入vue-persistedstate以及踩坑记录
这篇文章主要介绍了Nuxt引入vue-persistedstate以及踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
uniapp嵌套webview无法返回上一级解决方式
uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下
2024-05-05
Vue让router-view默认显示页面操作方法
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧
2024-03-03