How to Prevent Duplicate Form Submissions with State Locks, Button Disabling, and Throttling

When developing web pages or applications, users often click a submit button repeatedly due to network latency or impatience, which can cause duplicate orders, multiple identical form data submissions, or unnecessary database pressure.

Solution 1: State Lock

This is the most intuitive and easy-to-understand method, using a flag to control function execution. At the start of the function, set a "processing" flag; after the function finishes (whether success or failure), reset the flag. Subsequent clicks are ignored because the flag is detected.

let isSubmitting = false; // state lock
async function handleSubmit() {
  if (isSubmitting) {
    console.log('正在处理中，请勿重复提交...');
    return;
  }
  isSubmitting = true;
  console.log('表单提交中...');
  try {
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('表单提交成功！');
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    // unlock
    isSubmitting = false;
  }
}

document.getElementById('submitBtn').addEventListener('click', handleSubmit);

The advantage is its simplicity, low implementation cost, and suitability for most simple scenarios.

Solution 2: UI Feedback – Disable Button

This method not only blocks repeated clicks logically but also provides the most intuitive visual feedback for users. After the first click, set the button's disabled attribute to true, which prevents any further click events at the browser level. Once the operation completes, re‑enable the button.

This approach is easy to implement, and users can clearly see that the button is unavailable, understanding that their request is being processed.

Solution 3: Function Throttling

Throttling is a more general and elegant solution that limits high‑frequency events to execute only once within a specified interval, perfectly matching the requirement to respond to the first click and ignore subsequent ones.

First, we need a throttle utility function.

/**
 * Throttle function
 * @param {Function} func Function to execute
 * @param {number} delay Cool‑down time in milliseconds
 * @returns {Function} A new throttled function
 */
function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      func.apply(this, args);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

Wrap the submit function with throttling:

// Original submit function
function submit() {
  console.log('请求已发送！');
  // Simulate async request
  new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
    console.log('服务器响应了。');
  });
}

// Use throttling with a 2‑second cooldown
const throttledSubmit = throttle(submit, 2000);

document.getElementById('submitBtn').addEventListener('click', throttledSubmit);

This pattern is powerful and suitable for various high‑frequency scenarios such as scroll or resize. In real projects, we often combine these solutions—disable button, throttling, and state lock—to achieve the best effect. Throttling acts as a logical safety net, while button disabling provides clear UI feedback for users.