前端-防重复点击/防抖的方案

前端防抖的方案

自定义指令
直接使用自定义指令dom上控制，一般的防重复点击够用。

• 在组件上绑定自定义指令监听点击事件，触发后立即禁用按钮元素，延迟后恢复。默认禁用时间为3000毫秒，支持自定义时长。

import { Directive } from 'vue'
const preventRepeatClick: Directive<HTMLElement, number | undefined> = {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        const delay = binding.value ?? 3000
        setTimeout(() => (el.disabled = false), delay)
      }
    })
  }
}

适用场景

• 表单提交按钮（防重复）
• 需要直接操作DOM状态的场景

---

防抖函数

lodash.debounce实现
通过防抖函数包装控制执行频率，连续触发时仅执行最后一次。

import { debounce } from 'lodash'
const debouncedSearch = debounce(searchHandler, 500)

不适用场景

• 弱网环境会有问题:因为响应超出了防抖时间

---

业务层提交锁方案

状态标记控制
使用isSubmitting状态变量进行逻辑拦截，确保异步操作完整性。

const isSubmitting = ref(false)
const handleSubmit = async () => {
  if (isSubmitting.value) return
  isSubmitting.value = true
  try {
    await submitApi()
  } finally {
    isSubmitting.value = false
  }
}

适用场景

• 各种场景

---

方案选型建议

• 看实际要求，普通情况自定义指令即可。
• 考虑交互弱网使用锁。
• 常见的表单搜索使用防抖函数即可

组合使用策略

1. 高频UI事件：防抖函数
2. 按钮点击：自定义指令+提交锁
3. 关键业务：必须使用提交锁