JavaScript 空格鍵防抖：標記位模式避免重複彈窗

現象：`keydown` 事件持續觸發，`alert` 阻塞主線程導致隊列堆積，彈窗關閉後連續彈出。

根因

`alert` 是同步阻塞 API，瀏覽器在彈窗期間**不處理新事件**，但鍵盤按住不放會產生**重複 keydown**，排隊等待彈窗關閉後依次執行。

解決方案：標記位互斥

let spaceHandled = false;

document.addEventListener('keydown', function(e) {
    if (e.code === 'Space') {
        if (spaceHandled) return; // 已在處理中，忽略
        spaceHandled = true;
        
        alert('不能添加空格');
        
        // 彈窗關閉後釋放鎖（需異步釋放，避免同步代碼仍在執行）
        setTimeout(() => spaceHandled = false, 0);
    }
});

進階：防抖工具函數封裝

function debounceAction(key, action, wait = 300) {
    let timer = null, running = false;
    return function(e) {
        if (e.code !== key) return;
        if (running) return;
        running = true;
        action(e);
        clearTimeout(timer);
        timer = setTimeout(() => running = false, wait);
    };
}

// 使用
document.addEventListener('keydown', debounceAction('Space', e => {
    alert('不能添加空格');
}, 1000)); // 1秒內不再觸發

最佳實踐：替換 alert 為非阻塞提示

`alert`/`confirm`/`prompt` 會阻塞事件循環，體驗極差。推薦：

• Toast 輕提示：`toastr.warning('不能添加空格')`
• 內聯錯誤訊息：`不能添加空格` 顯示 2 秒後淡出。
• 輸入框原生驗證：`` + CSS `:invalid` 樣式。

關鍵點總結