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 防抖节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！