已解决
如何在Vue3项目中使用防抖节流技巧
来自网友在路上 143843提问 提问时间:2023-11-04 06:28:45阅读次数: 43
最佳答案 问答题库438位专家为你答疑解惑
前言
防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,从而提高组件的响应速度和用户体验。在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)
(4)运行效果
分别连续点击按钮即可看到效果 ~
二、自行设计实现的防抖节流函数
(1)自行设计实现防抖节流的好处
关于Vue的防抖节流函数库或插件已经有很多了,这个可以自己搜一下并看看效果如何。那为何还需要自行设计实现防抖节流?因为有些需求需要定制化设计,同时你还知道了防抖节流的基本原理。
(2)防抖节流具体实现
/*** 防抖*/
const debounce = (fn, time) => {let timer = nullreturn (...args) => {const context = thisif (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.call(context, ...args)}, time)}
}/*** 节流*/
const throttle = (fn, time) => {let activeTime = nullreturn (...args) => {const context = thisconst 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)
(4)运行效果
分别连续点击按钮即可看到效果 ~
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"如何在Vue3项目中使用防抖节流技巧":http://eshow365.cn/6-31591-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: Java模块化应用实践之精简JRE | 京东云技术团队
- 下一篇: x86保护模式笔记