各位朋友你们好呀。今天是立春，明天就是正月十五元宵节了，这种立春 + 元宵相隔的时候，可是很难遇到的，百年中就只有几次。在这提前祝大家元宵快乐。
今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。
前言
在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。
加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。
防抖或节流原理
防抖（debounce）
如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。
示例代码
1
2
3
4
5
6
7
8
9
| function debounce (fn, delay = 300){
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}
|
使用
1
| debounce(()=> count += 1, 1000)
|
节流（throttle ）
在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。
示例代码
1
2
3
4
5
6
7
8
9
10
11
| let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
|
使用
1
| throttle(()=> count += 1, 1000)
|
环境说明
新封装
这里我分两个模块来讲述。一个是防抖；另一个是节流。
虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。🚗🚗🚗
防抖（debounce）
先看常见封装内容。
常见封装-1
代码
1
2
3
4
5
6
7
8
9
10
11
12
| 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);
}
}
|
使用
1
| const addCount = debounce(()=> count.value += 1, 1000)
|
常见封装-2
代码
1
2
3
4
5
6
7
8
| let timer = null
function debounce (fn, delay = 1000){
if(timer != null){
clearTimeout(timer)
timer = null
}
timer = setTimeout(fn, delay)
}
|
使用
1
| const addCount = () => debounce(()=> count.value += 1, 1000)
|
新封装
这里我们需要借助 vue 3 中的 customRef 来实现我们的新方式。这里我就不具体写了。我直接在每行代码上面添加注释。我相信朋友你是能看懂的。🌹🌹🌹
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import { customRef, ref } from "vue"
function debounceRef (data, delay = 300){
let timer = null;
return delay == null
?
ref(data)
:
customRef((track, trigger) => {
return {
get () {
track()
return data
},
set (value) {
if(timer != null){
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
data = value;
trigger()
}, delay)
}
}
})
}
|
使用
1
2
3
4
5
6
7
8
9
10
11
|
const count = debounceRef(0, 300)
const addCount = () => {
count.value += 1
}
<input type="text" v-model="count">
|
节流（throttle）
我们还是一样，先看常见封装内容。
常见封装-1
代码
1
2
3
4
5
6
7
8
9
10
11
| let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
|
使用
1
| const addCount = () => throttle(()=> count.value += 1, 1000)
|
常见封装-2
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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);
}
}
}
|
使用
1
| const addCount = throttle(()=> count.value += 1, 1000)
|
新封装
节流和防抖在封装和使用上大同小异。
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
function throttleRef (data, delay = 300){
let timer = null;
return delay == null
?
ref(data)
:
customRef((track, trigger) => {
return {
get () {
track()
return data
},
set (value) {
if(timer == null){
timer = setTimeout(() => {
data = value;
trigger()
clearTimeout(timer)
timer = null
}, delay)
}
}
}
})
}
|
使用
1
2
3
4
5
6
7
8
9
10
11
|
const count = debounceRef(0, 300)
const addCount = () => {
count.value += 1
}
<input type="text" v-model="count">
|
总结
以上便是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章的全部内容，如有不足或朋友你有更好的方式或者其他独到的见解，欢迎评论 + 私信。
当然朋友你又学到了一招可以点赞 + 关注 + 评论哦。
希望本篇文章对正在阅读的朋友你有所帮助。
想了解vue 2中如何实现相同方案的朋友可以点击这里 👉 Vue 2 中的实现 CustomRef 方式防抖/节流
我是桃小瑞，公众号 @ 桃小瑞。
