vue3、TS 按钮防抖
vue3、TS 按钮防抖
·
为什么要做按钮防抖
因为有个时候可能网络比较慢,响应比较慢,用户就以为没有点上,就会一直狂点,就会发起多次请求,导致请求资源的浪费。
还有一种情况就是用户恶意点击,造成多次的请求发起,也造成了资源浪费。
什么是防抖
触发高频事件后,在n秒内只会执行一次,如果在n秒内再次触发,则会重新计时。
vue3 防抖实现
<template>
<div class="btn-left" @click="trigger('防抖')">防抖</div>
</template>
setup() {
const timer: NodeJS.Timeout | null = null
// 业务代码
const changeIsOpen = (key: String) => {
console.log(key, '业务代码')
}
/**
* @explain: 防抖
* @param {*} key
*/
const trigger = (key: String) => {
let firstClick: Boolean = !timer;
if (firstClick) {
// 第一次会执行
changeIsOpen(key)
}
// 如果定时器存在清空定时器
if (timer) {
clearTimeout(timer);
}
// 设置定时器,此时firstClick会变为false,规定时间后time才会为null
timer = setTimeout(() => {
timer = null;
// 如果firstClick为true,执行
if (!firstClick) {
// fn(...arguments);
changeIsOpen(key)
}
}, 1000);
}
// 页面销毁前 清除定时器
onBeforeUnmount(() => {
clearTimeout(timer)
timer = null
})
return {
timer,
changeIsOpen,
trigger
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)