防止 JavaScript 重復點擊和提交的關鍵方法有三種：1. 禁用按鈕法，點擊后立即禁用按鈕并更改文本提示，請求完成后恢復；2. 節流函數（throttle），限制函數在設定時間間隔內僅執行一次，適用于非即時響應場景；3. 使用標志位，通過變量標記操作狀態以阻止重復觸發。此外，前端可通過按鈕文本變化或加載動畫提升用戶提示體驗，而后端則可通過 Token 機制、悲觀鎖/樂觀鎖及冪等性設計確保數據一致性與安全性。選擇方案應根據具體場景決定，前端與后端結合使用可提供更全面的防護。
防止 JavaScript 重復點擊和提交，關鍵在于控制用戶行為，避免短時間內多次觸發相同操作。這不僅僅是用戶體驗的問題，更關系到數據一致性和服務器壓力。
解決方案
-
禁用按鈕法： 這是最直接也最常用的方法。點擊按鈕后，立即禁用它，防止用戶再次點擊。待請求完成后，再重新啟用按鈕。
const button = document.getElementById('myButton'); button.addEventListener('click', function() { button.disabled = true; button.textContent = '處理中...'; // 可選：更改按鈕文本提示用戶 // 模擬一個異步請求 setTimeout(() => { // 請求成功或失敗后的處理 button.disabled = false; button.textContent = '提交'; // 恢復按鈕文本 }, 2000); });這種方法的優點是簡單易懂，缺點是用戶體驗可能略差，因為按鈕禁用期間無法進行任何操作。可以結合按鈕文本的變化來改善用戶體驗。
-
節流函數（Throttle）： 使用節流函數可以限制函數在一定時間內只能執行一次。這適用于那些不需要立即響應的場景，比如搜索框的輸入事件。
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("函數執行"); }; const throttledFunc = throttle(myFunc, 1000); // 1秒內只允許執行一次 // 多次調用 throttledFunc，但實際上只有在間隔超過 1 秒時才會執行 throttledFunc(); throttledFunc(); setTimeout(throttledFunc, 500); setTimeout(throttledFunc, 1200);節流函數的核心在于時間控制，確保函數在規定的時間間隔內只執行一次。
-
使用標志位： 定義一個變量來標記是否正在進行操作。如果正在進行操作，則忽略后續的點擊事件。
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); });這種方法簡單直接，但需要注意在異步操作完成后，一定要將標志位重置，否則后續操作將無法進行。
如何選擇最合適的防止重復提交方案？
這取決于你的具體應用場景。如果只需要簡單地防止按鈕被連續點擊，禁用按鈕法是最簡單的選擇。如果需要限制函數在一定時間內只能執行一次，節流函數更合適。如果需要更精細的控制，比如在表單提交過程中防止重復提交，使用標志位可能更靈活。
禁用按鈕后，如何優雅地提示用戶正在處理中？
僅僅禁用按鈕可能讓用戶感到困惑，不知道發生了什么。更好的做法是結合按鈕文本的變化，例如將按鈕文本改為“處理中…”或顯示一個加載動畫。此外，還可以使用模態框或消息提示來告知用戶當前的狀態。
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 已經被使用過，則拒絕本次請求。
- 悲觀鎖/樂觀鎖： 在數據庫層面使用鎖機制，確保同一時間只有一個請求可以修改數據。
- 冪等性設計： 將接口設計成冪等的，即使多次調用，結果也應該是一致的。例如，可以使用唯一 ID 來標識請求，后端根據 ID 來判斷是否已經處理過該請求。
后端防止重復提交是更可靠的方案，可以有效地防止惡意攻擊和網絡延遲等問題導致的重復提交。
