各位朋友你们好呀    
    
   。今天是立春    
    
    
，明天就是正月十五元宵节了


     


     


   ，这种立春 + 元宵相隔的时候
 




 




 

，可是很难遇到的   

   

   

，百年中就只有几次     


     


     

。在这提前祝大家元宵快乐




 




 




。

今天给大家带来的是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)

新封装

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




  




  




。

代码 // 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){ // 创建定时器 timer = setTimeout(() => { // 修改数据 data = value; // 派发更新 trigger() // 清除定时器 clearTimeout(timer) timer = null }, delay) } } } }) } 使用 // 创建 const count = debounceRef(0, 300) // 函数中使用 const addCount = () => { count.value += 1 } // v-model 中使用 <input type="text" v-model="count">

总结

以上便是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章的全部内容  


  


  


，如有不足或朋友你有更好的方式或者其他独到的见解  
     
     
 ，欢迎评论 + 私信


 



 



。

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

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




    




    



。

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

我是桃小瑞


   




   




   ，公众号 @ 桃小瑞













。