Vue3中的极致防抖/节流详解(附常见方式防抖/节流)
更新时间：2023年02月06日 11:15:29 作者：桃小瑞
在JavaScript中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中极致防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。
在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。
加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。
防抖或节流原理
防抖（debounce）
如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。
示例代码
function debounce (fn, delay = 300){
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}使用
debounce(()=> count += 1, 1000)
节流（throttle ）
在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。
示例代码
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}使用
throttle(()=> count += 1, 1000)
环境说明
- vue 3
- vite
新封装
这里我分两个模块来讲述。一个是防抖；另一个是节流。
虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。🚗🚗🚗
防抖（debounce）
先看常见封装内容。
常见封装-1
代码
function debounce (fn, delay = 300){
let timer = null
return function (...args) {
if(timer != null){
clearTimeout(timer)
timer = null
}
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}使用
const addCount = debounce(()=> count.value += 1, 1000)
常见封装-2
代码
let timer = null
function debounce (fn, delay = 1000){
if(timer != null){
clearTimeout(timer)
timer = null
}
timer = setTimeout(fn, delay)
}使用
const addCount = () => debounce(()=> count.value += 1, 1000)
新封装
这里我们需要借助 vue 3 中的 customRef 来实现我们的新方式。这里我就不具体写了。我直接在每行代码上面添加注释。我相信朋友你是能看懂的。🌹🌹🌹
代码
// 从 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"
// data 为创建时的数据
// delay 为防抖时间
function debounceRef (data, delay = 300){
// 创建定时器
let timer = null;
// 对 delay 进行判断，如果传递的是 null 则不需要使用 防抖方案，直接返回使用 ref 创建的。
return delay == null
?
// 返回 ref 创建的
ref(data)
:
// customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
customRef((track, trigger) => {
return {
get () {
// 收集依赖
track()
// 返回当前数据的值
return data
},
set (value) {
// 清除定时器
if(timer != null){
clearTimeout(timer)
timer = null
}
// 创建定时器
timer = setTimeout(() => {
// 修改数据
data = value;
// 派发更新
trigger()
}, delay)
}
}
})
}使用
// 创建
const count = debounceRef(0, 300)
// 函数中使用
const addCount = () => {
count.value += 1
}
// v-model 中使用
<input type="text" v-model="count">节流（throttle）
我们还是一样，先看常见封装内容。
常见封装-1
代码
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}使用
const addCount = () => throttle(()=> count.value += 1, 1000)
常见封装-2
代码
function throttle (fn, delay = 300) {
let timer = null
return function (...args) {
if(timer == null){
timer = setTimeout(() => {
fn.call(this, ...args)
clearTimeout(timer)
timer = null
}, delay);
}
}
}使用
const addCount = throttle(()=> count.value += 1, 1000)
新封装
节流和防抖在封装和使用上都是一模一样的，但为了方便阅读，我还是在下方为各位朋友 copy 了一份🤭🤭。
代码
// data 为创建时的数据
// delay 为节流时间
function throttleRef (data, delay = 300){
// 创建定时器
let timer = null;
// 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
return delay == null
?
// 返回 ref 创建的
ref(data)
:
// customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
customRef((track, trigger) => {
return {
get () {
// 收集依赖
track()
// 返回当前数据的值
return data
},
set (value) {
// 清除定时器
if(timer != null){
clearTimeout(timer)
timer = null
}
// 创建定时器
timer = setTimeout(() => {
// 修改数据
data = value;
// 派发更新
trigger()
}, delay)
}
}
})
}使用
// 创建
const count = debounceRef(0, 300)
// 函数中使用
const addCount = () => {
count.value += 1
}
// v-model 中使用
<input type="text" v-model="count">总结
以上便是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章的全部内容
到此这篇关于Vue3中的极致防抖/节流详解的文章就介绍到这了,更多相关Vue3极致防抖/节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Nuxt封装@nuxtjs/axios请求后端数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue+openlayers+nodejs+postgis实现轨迹运动效果
使用postgres（postgis）数据库以及nodejs作为后台,vue和openlayers做前端,openlayers使用http请求通过nodejs从postgres数据库获取数据,这篇文章主要介绍了vue+openlayers+nodejs+postgis实现轨迹运动,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了基于vue-element组件实现音乐播放器功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
在 Vue3.x 中,组件间的参数传递是构建复杂应用时不可或缺的一部分,无论是父子组件还是兄弟组件之间,合理的数据流动都是保持应用状态一致性和可维护性的关键,本文将通过示例代码,详细介绍 Vue3.x 中组件间如何传递参数,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue3在Setup中使用axios请求获取的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文主要介绍了Vue使用lodash进行防抖节流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。2021-06-06
在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。2020-03-03
这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法，代码分为html和js两部分,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论