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之input输入框防抖debounce函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了django使用channels2.x实现实时通讯，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了vue阻止重复请求实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
本篇文章主要介绍了Vue 兄弟组件通信的方法（不使用Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本篇文章主要介绍了vue实现app页面切换动画效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vue去除#问题处理经过，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
uniapp的顶部导航栏有时候不符合设计需求,我们可以自定义顶部导航栏,下面这篇文章主要给大家介绍了关于uniapp自定义导航栏的保姆级教程,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
Vue表单验证 trigger:'blur'OR trigger:'change&ap
利用 elementUI 实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形，这篇文章主要介绍了Vue表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别,需要的朋友可以参考下2023-09-09
最新评论