Vue实现禁止重复点击、发送多次请求问题

// 全局注册自定义指令
Vue.directive("resetClick", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        el.style.cursor = "not-allowed";
        setTimeout(() => {
          el.disabled = false;
          el.style.cursor = "pointer";
        }, binding.value || 1000);
      }
    });
  },
});

// 组件内使用
<el-button type="primary" v-resetClick="1000" @click="confirm">
    确 定
</el-button>

// 防抖debounce代码：
function debounce(fn, delay) {
  let timeout = null // 创建一个标记用来存放定时器的返回值
  return function (e) {
    // 每当用户输入的时候把前一个 setTimeout clear 掉
    clearTimeout(timeout)
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
      timeout = null
    }, delay)
  }
}

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速连续点击</el-button>
  </div>
</template>

<script>
import { debounce } from '@/util/util.js'

export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(() => {
      console.log('删除操作等业务逻辑')
    }, 500),
  },
}
</script>

<style></style>

npm i lodash -S

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速连续点击</el-button>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(
      () => {
        console.log('删除操作等业务逻辑')
      },
      500,
      {
        leading: true, // 在延迟开始前立即调用事件
        trailing: false, // 在延时结束后不调用,保证事件只被触发一次
      },
    ),
  },
}
</script>