JavaScript防止重復提交的三種解決方案

更新時間：2025年07月24日 11:13:13 作者：~風清揚~

防止JavaScript重復點擊和提交需結(jié)合前端禁用按鈕、節(jié)流和標志位,這篇文章主要介紹了JavaScript防止重復提交的三種解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

防止 javascript 重復點擊和提交的關鍵方法有三種：1. 禁用按鈕法，點擊后立即禁用按鈕并更改文本提示，請求完成后恢復；2. 節(jié)流函數(shù)（throttle），限制函數(shù)在設定時間間隔內(nèi)僅執(zhí)行一次，適用于非即時響應場景；3. 使用標志位，通過變量標記操作狀態(tài)以阻止重復觸發(fā)。此外，前端可通過按鈕文本變化或加載動畫提升用戶提示體驗，而后端則可通過 token 機制、悲觀鎖/樂觀鎖及冪等性設計確保數(shù)據(jù)一致性與安全性。選擇方案應根據(jù)具體場景決定，前端與后端結(jié)合使用可提供更全面的防護。

防止 JavaScript 重復點擊和提交，關鍵在于控制用戶行為，避免短時間內(nèi)多次觸發(fā)相同操作。這不僅僅是用戶體驗的問題，更關系到數(shù)據(jù)一致性和服務器壓力。

解決方案

1.禁用按鈕法：

這是最直接也最常用的方法。點擊按鈕后，立即禁用它，防止用戶再次點擊。待請求完成后，再重新啟用按鈕。

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  button.disabled = true;
  button.textContent = '處理中...'; // 可選：更改按鈕文本提示用戶

  // 模擬一個異步請求
  setTimeout(() => {
    // 請求成功或失敗后的處理
    button.disabled = false;
    button.textContent = '提交'; // 恢復按鈕文本
  }, 2000);
});

這種方法的優(yōu)點是簡單易懂，缺點是用戶體驗可能略差，因為按鈕禁用期間無法進行任何操作?？梢越Y(jié)合按鈕文本的變化來改善用戶體驗。

2.節(jié)流函數(shù)（Throttle）：

使用節(jié)流函數(shù)可以限制函數(shù)在一定時間內(nèi)只能執(zhí)行一次。這適用于那些不需要立即響應的場景，比如搜索框的輸入事件。

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const now = Date.now();
    const timeSinceLastExec = now - lastExecTime;

    if (!timeoutId) {
      if (timeSinceLastExec >= delay) {
        func.apply(this, args);
        lastExecTime = now;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay - timeSinceLastExec);
      }
    }
  };
}

const myFunc = () => {
  console.log("函數(shù)執(zhí)行");
};

const throttledFunc = throttle(myFunc, 1000); // 1秒內(nèi)只允許執(zhí)行一次

// 多次調(diào)用 throttledFunc，但實際上只有在間隔超過 1 秒時才會執(zhí)行
throttledFunc();
throttledFunc();
setTimeout(throttledFunc, 500);
setTimeout(throttledFunc, 1200);

節(jié)流函數(shù)的核心在于時間控制，確保函數(shù)在規(guī)定的時間間隔內(nèi)只執(zhí)行一次。

3.使用標志位：

定義一個變量來標記是否正在進行操作。如果正在進行操作，則忽略后續(xù)的點擊事件

let isSubmitting = false;

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默認的表單提交

  if (isSubmitting) {
    console.log('正在提交，請稍候...');
    return;
  }

  isSubmitting = true;
  console.log('開始提交...');

  // 模擬一個異步提交
  setTimeout(() => {
    console.log('提交完成！');
    isSubmitting = false;
  }, 3000);
});

這種方法簡單直接，但需要注意在異步操作完成后，一定要將標志位重置，否則后續(xù)操作將無法進行。

如何選擇最合適的防止重復提交方案？

這取決于你的具體應用場景。如果只需要簡單地防止按鈕被連續(xù)點擊，禁用按鈕法是最簡單的選擇。如果需要限制函數(shù)在一定時間內(nèi)只能執(zhí)行一次，節(jié)流函數(shù)更合適。如果需要更精細的控制，比如在表單提交過程中防止重復提交，使用標志位可能更靈活。

禁用按鈕后，如何優(yōu)雅地提示用戶正在處理中？

僅僅禁用按鈕可能讓用戶感到困惑，不知道發(fā)生了什么。更好的做法是結(jié)合按鈕文本的變化，例如將按鈕文本改為“處理中...”或顯示一個加載動畫。此外，還可以使用模態(tài)框或消息提示來告知用戶當前的狀態(tài)。

const button = document.getElementById('myButton');
const originalText = button.textContent;

button.addEventListener('click', function() {
  button.disabled = true;
  button.textContent = '處理中...'; // 更改按鈕文本
  button.classList.add('loading'); // 添加一個 loading class，用于顯示加載動畫

  // 模擬一個異步請求
  setTimeout(() => {
    // 請求成功或失敗后的處理
    button.disabled = false;
    button.textContent = originalText; // 恢復按鈕文本
    button.classList.remove('loading'); // 移除 loading class
  }, 2000);
});

在 CSS 中定義 .loading 類，例如：

.loading {
  position: relative;
  padding-right: 25px; /* 為加載動畫預留空間 */
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

除了前端，后端如何防止重復提交？

前端的防止重復提交只能解決一部分問題，更可靠的方案是在后端進行驗證。常見的后端防止重復提交的方法包括：

Token 機制： 在前端頁面生成一個唯一的 Token，每次提交請求時都帶上這個 Token。后端驗證 Token 的有效性，如果 Token 已經(jīng)被使用過，則拒絕本次請求。
悲觀鎖/樂觀鎖： 在數(shù)據(jù)庫層面使用鎖機制，確保同一時間只有一個請求可以修改數(shù)據(jù)。
冪等性設計： 將接口設計成冪等的，即使多次調(diào)用，結(jié)果也應該是一致的。例如，可以使用唯一 ID 來標識請求，后端根據(jù) ID 來判斷是否已經(jīng)處理過該請求。

后端防止重復提交是更可靠的方案，可以有效地防止惡意攻擊和網(wǎng)絡延遲等問題導致的重復提交。