开发网站比较好的公司,linux上搭建网站,功能网站建设,如何增加新网站的百度收录前言
防抖节流是可以说是一种优化组件性能的技巧#xff0c;可以有效减少组件中的渲染次数和计算量#xff0c;从而提高组件的响应速度和用户体验。在Vue3中可以使用lodash库中的debounce和throttle函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数#xff0…前言
防抖节流是可以说是一种优化组件性能的技巧可以有效减少组件中的渲染次数和计算量从而提高组件的响应速度和用户体验。在Vue3中可以使用lodash库中的debounce和throttle函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数调用方式都差不多。
防抖在一定时间内多次触发同一事件只执行最后一次操作常用于输入框搜索、滚动加载等场景。
节流在一定时间内多次触发同一事件限制函数执行频率防止函数被频繁调用从而提高页面性能。
一、基于Vue3内置的lodash函数库实现防抖节流
1首先导入lodash函数库的防抖和节流方法
import { debounce, throttle } from lodash
2随便写两个按钮
el-button sizesmall typeprimary clickhandleDebounceClick($event)el-icon :size16 stylemargin-right: 5px;Basketball //el-iconsmall防抖·篮球/small
/el-buttonel-button sizesmall typeprimary clickhandleThrottleClick($event)el-icon :size16 stylemargin-right: 5px;Football //el-iconsmall节流·足球/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 sizesmall typeprimary clickhandleDebounceClick($event, 你好)el-icon :size16 stylemargin-right: 5px;Basketball //el-iconsmall防抖·篮球/small
/el-buttonel-button sizesmall typeprimary clickhandleThrottleClick($event, 世界)el-icon :size16 stylemargin-right: 5px;Football //el-iconsmall节流·足球/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运行效果
分别连续点击按钮即可看到效果 ~
