目录
0.什么事极致防抖/节流
前言
防抖或节流原理
防抖(debounce)
节流(throttle )
使用
环境说明
新封装
防抖(debounce)
使用
节流(throttle)
总结
Vue3中的极致防抖/节流是一种重要的性能优化策略,它可以有效地减少由于事件被多次触发而引起的不必要的开销。Vue3中的极致防抖/节流主要用于处理频繁触发的事件,如用户的滚动、点击和输入等。 极致防抖(Debounce)和节流(Throttle)均涉及可以在单位时间内只执行一次某事件的策略,它们两者的不同之处在于,极致防抖会在第一次触发的时候进行延迟,而节流则是固定时间间隔内对事件进行触发,即使没有触发新的事件也不会更改时间间隔。 针对Vue3,可以在钩子函数中使用debounce方法,实现极致防抖,从而确保用户触发的操作只被执行一次。相反,可以使用throttle方法,实现节流,确保每隔一段时间才调用操作函数,而未触发的事件会直接被忽略。 此外,Vue3还可以使用prevent和once等方法,避免重复处理特定事件,并实现更高效率的性能优化。 总而言之,Vue3中的极致防抖/节流可以有效地节省处理频繁触发的事件的开销,如用户的滚动、点击和输入等,是一种有效的性能优化策略。
今天给大家带来的是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单、更清晰。
在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的,常规操作就是在对应位置加上防抖或者节流。
加上防抖或者节流的作用:一是为了防止用户频繁操作;二是为了节约一定的服务器资源,减少资源浪费的情况。
如果用户多次频繁操作以最后一次为准,当然也可以以第一次为准,进行数据更新或者网络资源请求,以消除冗余的操作,或者减少一定的请求资源浪费。
示例代码
function debounce (fn, delay = 300){
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}
使用
debounce(()=> count += 1, 1000)
在一定时间范围内,用户触发多次只会执行一次以达到防止用户频繁操作的目的。
示例代码
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
throttle(()=> count += 1, 1000)
这里我分两个模块来讲述。一个是防抖;另一个是节流。
虽然这两个差别不是很大,但还是有区别的。上车,兄弟们。
先看常见封装内容。
常见封装-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 中使用
我们还是一样,先看常见封装内容。
常见封装-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 中使用
以上便是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章的全部内容