Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

各位朋友你们好呀。今天是立春，明天就是正月十五元宵节了，这种立春 + 元宵相隔的时候，可是很难遇到的，百年中就只有几次。在这提前祝大家元宵快乐。

今天给大家带来的是

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。

前言

在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。

加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

防抖或节流原理

防抖（debounce）

如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。

示例代码

functiondebounce(fn, delay =300){let timer =nullreturnfunction(...args){clearTimeout(timer)
        timer =setTimeout(()=>{fn.call(this,...args)}, delay);}}

使用

debounce(()=> count +=1,1000)

节流（throttle ）

在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。

示例代码

let timer =nullfunctionthrottle(fn, delay =300){if(timer ==null){
        timer =setTimeout(()=>{fn()clearTimeout(timer)
            timer =null}, delay);}}

使用

throttle(()=> count +=1,1000)

环境说明

• vue 3
• vite

新封装

这里我分两个模块来讲述。一个是防抖；另一个是节流。

虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。🚗🚗🚗

防抖（debounce）

先看常见封装内容。

常见封装-1

代码

functiondebounce(fn, delay =300){let timer =nullreturnfunction(...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 =nullfunctiondebounce(fn, delay =1000){if(timer !=null){clearTimeout(timer)
        timer =null}
    timer =setTimeout(fn, delay)}

使用

constaddCount=()=>debounce(()=> count.value +=1,1000)

新封装

这里我们需要借助

vue 3

中的

customRef

来实现我们的新方式。这里我就不具体写了。我直接在每行代码上面添加注释。我相信朋友你是能看懂的。🌹🌹🌹

代码

// 从 vue 中引入 customRef 和 refimport{ customRef, ref }from"vue"// data 为创建时的数据// delay 为防抖时间functiondebounceRef(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)// 函数中使用constaddCount=()=>{
  count.value +=1}// v-model 中使用<input type="text" v-model="count">

节流（throttle）

我们还是一样，先看常见封装内容。

常见封装-1

代码

let timer =nullfunctionthrottle(fn, delay =300){if(timer ==null){
        timer =setTimeout(()=>{fn()clearTimeout(timer)
            timer =null}, delay);}}

使用

constaddCount=()=>throttle(()=> count.value +=1,1000)

常见封装-2

代码

functionthrottle(fn, delay =300){let timer =nullreturnfunction(...args){if(timer ==null){
            timer =setTimeout(()=>{fn.call(this,...args)clearTimeout(timer)
                timer =null}, delay);}}}

使用

const addCount =throttle(()=> count.value +=1,1000)

新封装

节流和防抖在封装和使用上大同小异的。

代码

// data 为创建时的数据// delay 为节流时间functionthrottleRef(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){// 创建定时器
                        timer =setTimeout(()=>{// 修改数据
                            data = value;// 派发更新trigger()// 清除定时器clearTimeout(timer)
                            timer =null}, delay)}}}})}

使用

// 创建const count =debounceRef(0,300)// 函数中使用constaddCount=()=>{
  count.value +=1}// v-model 中使用<input type="text" v-model="count">

总结

以上便是

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

这篇文章的全部内容，如有不足或朋友你有更好的方式或者其他独到的见解，欢迎评论 + 私信。

当然朋友你又学到了一招可以点赞 + 关注 + 评论哦。

希望本篇文章对正在阅读的朋友你有所帮助。

想了解vue 2中如何实现相同方案的朋友可以点击这里 👉 Vue 2 中的实现 CustomRef 方式防抖/节流

我是桃小瑞，公众号 @ 桃小瑞。