快速點擊復選框導致JavaScript狀態鎖失效的原因及解決方法
在javascript開發中，我們經常使用狀態鎖來防止函數在執行過程中被重復調用。然而，快速點擊html復選框可能會導致狀態鎖失效，本文將分析其原因并提供解決方案。
問題描述
假設我們有一個帶有復選框的HTML頁面，點擊復選框會觸發一個耗時操作。我們使用一個布爾變量is_running作為狀態鎖，防止重復調用。代碼如下：
const checkbox = document.querySelector("#myCheckbox"); let is_running = false; checkbox.addEventListener("change", () => { if (is_running) return; is_running = true; checkbox.disabled = true; runTask(() => { is_running = false; checkbox.disabled = false; }); }); function runTask(callback) { console.log("Task started"); // 模擬耗時操作 setTimeout(() => { console.log("Task finished"); callback(); }, 5000); // 延時5秒 }
即使設置了is_running和disabled屬性，快速連續點擊復選框仍然可能多次觸發runTask函數。
原因分析
這是因為瀏覽器事件機制和JavaScript單線程執行模型共同作用的結果。當快速點擊復選框時，多個change事件會迅速進入事件隊列。雖然第一個事件設置了is_running為true，但由于runTask函數是異步操作（使用setTimeout模擬），在is_running被設置為false之前，后續的change事件已經進入隊列并開始執行。 每個事件都會獨立檢查is_running的狀態，導致runTask函數被多次調用。
解決方案
為了解決這個問題，我們可以采用以下幾種方法：
-
使用debounce或throttle函數: 這些函數可以限制函數的執行頻率，避免在短時間內多次調用。 許多JavaScript庫（例如Lodash）都提供了這些函數。
-
使用promise和async/await: 將runTask函數改寫為異步函數，使用await等待任務完成，確保在下一個事件處理之前，is_running已經恢復為false。
-
使用事件監聽器的移除和添加: 在runTask函數開始執行時，移除change事件監聽器；在任務完成后，再重新添加監聽器。
以下是一個使用Promise和async/await的改進版本：
const checkbox = document.querySelector("#myCheckbox"); let is_running = false; checkbox.addEventListener("change", async () => { if (is_running) return; is_running = true; checkbox.disabled = true; await runTask(); is_running = false; checkbox.disabled = false; }); async function runTask() { console.log("Task started"); // 模擬耗時操作 await new Promise(resolve => setTimeout(resolve, 5000)); // 延時5秒 console.log("Task finished"); }
這個改進版本確保了runTask函數只會被執行一次，即使快速點擊復選框。 選擇哪種解決方案取決于具體的項目需求和代碼風格。 使用debounce或throttle更適合處理頻繁觸發的事件，而Promise和async/await更清晰易懂，適合處理相對簡單的異步操作。
