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.js 中，$router 和 $route 是两个常用的对象，用于处理路由相关的操作，下面小编就来和大家介绍一下$router 和 $route 的区别以及如何使用它们吧2023-06-06
这篇文章主要介绍了spring-cloud-stream的手动消息确认问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在前后端交互的时候,有时候需要通过get或者delete传递一个数组给后台,下面下面这篇文章主要给大家介绍了关于vue中get方法\post方法如何传递数组参数,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了Vue3中的onMounted生命周期钩子,它在组件挂载到DOM后执行代码,onMounted只调用一次,适合进行异步操作、DOM操作和事件监听,在使用时需要注意组件销毁和响应式数据的管理,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了uniapp 拖拽图片排序功能实现类似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,图片数组的插入排序,另一部分是上传加号图片的 定位 动态计算分为几列,每一个图片大小的位置 绝对定位的计算,需要的朋友可以参考下2024-07-07
在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下2024-09-09
一文带你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一项强大功能,它改进了代码组织和重用,使得构建组件更加灵活和可维护,本文我们将深入探讨 Composition API 的各个方面,希望对大家有所帮助2023-10-10
最新评论