# 防抖与节流
# 防抖
防抖是指控制请求发送的速度,一般就是在发送请求的之前加上延迟(但是点击多少下还是会发多少次请求)
# 节流
节流控制请求发送的次数(在给定时间内点击无数次也只发一次请求)
这两种方法都能在前端有效的去阻止请求过多
# 用自定义指令实现防抖与节流
# 手写防抖
app.directive('debounce', {
mounted(el, binding){
if(typeof binding.value.fn !== 'function' || !binding.value.event) return;
let delay = 200
el.timer = null
el.handle = function (){
if(el.timer){
clearTimeout(el.timer)
el.timer = null
}
el.timer = setTimeout(() => {
binding.value.fn.apply(this,arguments)
el.timer = null
},binding.value.delay || delay)
}
el.addEventListener(binding.value.event,el.handle)
},
beforeUnmount(el, binding){
el.removeEventListener(binding.value.event,el.handle) //卸载
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
使用案例
<script setup>
const handleClick = () => {
console.log('防抖点击');
}
</script>
<template>
<button v-debounce="{fn: handleClick, event: 'click', delay: 200}">点击试试</button>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 手写节流
节流的代码只有一个地方不同,就是当当前DOM的el.timer具有计时器的时候,直接跳过不执行此次操作
if(el.timer) return;
1
至此,初步了解啦前端限流的方式,同时熟悉了自定义指令的使用QAQ
写于综合阅览室