防止重复提交

问题

如何防止用户快速连续点击按钮，造成数据多次提交？

解答

前端防止重复提交的核心思路是：在第一次提交的结果返回前，禁止用户再次触发提交操作。

方法一：禁用按钮

使用 disabled 属性禁用按钮（适用于 <button> 标签）：

async function handleSubmit() {
  const btn = document.querySelector('#submitBtn');
  btn.disabled = true;
  
  try {
    await submitData();
  } finally {
    btn.disabled = false;
  }
}

方法二：CSS 禁用点击

通过 pointer-events 属性禁用点击事件：

async function handleSubmit() {
  const btn = document.querySelector('#submitBtn');
  btn.style.pointerEvents = 'none';
  
  try {
    await submitData();
  } finally {
    btn.style.pointerEvents = 'auto';
  }
}

方法三：状态变量控制

使用变量标记提交状态：

let isSubmitting = false;

async function handleSubmit() {
  if (isSubmitting) return;
  
  isSubmitting = true;
  try {
    await submitData();
  } finally {
    isSubmitting = false;
  }
}

方法四：防抖处理

对点击事件进行防抖：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) return;
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

const handleSubmit = debounce(async function() {
  await submitData();
}, 1000);

方法五：全局遮罩层

显示 loading 遮罩层阻止所有交互：

async function handleSubmit() {
  showLoading(); // 显示全屏 loading
  
  try {
    await submitData();
  } finally {
    hideLoading();
  }
}

关键点

• 提交前禁用按钮或阻止事件，提交完成后恢复
• disabled 属性和 pointer-events: none 都能禁用交互
• 使用状态变量控制是最灵活的方案
• 防抖适合限制提交频率
• 全局遮罩层可以同时提供视觉反馈