封装单位时间内按钮不可重复点击

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>