1.建个utils文件
// 单位时间内不可重复点击
let clickTimer = 0
export function clickThrottle (interval = 3000) {
const now = +new Date() // 获取当前时间的时间戳
const timer = clickTimer // 记录触发事件的事件戳
if (now - timer < interval) {
// 如果当前时间 - 触发事件时的事件 < interVal,那么不符合条件,直接return false,
// 不让当前事件继续执行下去
return false
} else {
// 反之,记录符合条件触发了事件的时间戳,并 return true,使事件继续往下执行
clickTimer = now
return true
}
}
2.使用案例
<template>
<div>
<el-button type="primary" @click="handleClick">点击</el-button>
</div>
</template>
<script>
import { clickThrottle } from "@/common/utils/utils.js";
export default {
data() {
return {
}
},
methods: {
handleClick(){
if(!clickThrottle(5000)){
this.$message.error('5秒内不可重复点击')
return
}
console.log('点击了按钮');
}
}
}
</script>
<style scoped lang="scss">
</style>