Vue3中的极致防抖/节流详解(附常见方式防抖/节流)
目录
- 前言
- 防抖或节流原理
- 防抖(debounce)
- 示例代码
- 使用
- 节流(throttle )
- 示例代码
- 使用
- 环境说明
- 新封装
- 防抖(debounce)
- 常见封装-1
- 常见封装-2
- 新封装
- 使用
- 节流(throttle)
- 常见封装-1
- 常见封装-2
- 新封装
- 总结
前言
今天给大家带来的是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 了一份
赞 (0)