快捷键防抖确保只在用户停止按键后响应最后一次组合键，避免重复触发；如Ctrl+S连按时，300ms内仅执行一次保存，防止接口重复提交、状态错乱，需独立防抖实例、及时清理定时器。
快捷键连续触发时用防抖控制执行，核心是：只在用户停止按键一段时间后才响应最后一次按键组合，避免高频误触或重复执行。
为什么快捷键需要防抖
比如监听 Ctrl+S 保存操作，用户可能快速连按多次（尤其习惯性猛敲），若每次按键都触发保存逻辑，不仅浪费资源，还可能导致接口重复提交、状态错乱或覆盖未完成的异步操作。防抖能确保“等用户手停了再干活”，更符合真实交互意图。
基础防抖函数封装
先写一个通用防抖函数，支持手动取消和立即执行选项：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
function debounce(func, wait, immediate = false) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
if (!immediate) func(...args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func(...args);
};
}
绑定快捷键并应用防抖
监听 keydown 事件，识别组合键（如 Ctrl+Enter），用防抖包装处理函数：
立即学习“Java免费学习笔记（深入）”；
- 用 e.ctrlKey、e.key === 'Enter' 等判断是否匹配目标快捷键
- 避免在 keyup 或 keypress 上做，因 keydown 更及时且兼容组合键检测
- 防抖函数需在闭包外定义一次，不要每次 keydown 都新建，否则无法清除上一次定时器
- 示例：
const saveHandler = debounce(() => {
console.log('执行保存');
// 调用 API 或更新状态
}, 300);
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault(); // 阻止浏览器默认保存行为
saveHandler();
}
});
注意点与边界情况
防抖不是万能的，需结合场景调整：
- 等待时间不宜过长：300ms 是常见值，太短起不到过滤作用，太长（如 1s）会让用户感觉卡顿
- 不适用于需即时反馈的操作：比如游戏按键、实时搜索建议，该用节流或直接响应
- 多个快捷键共用同一防抖函数要小心：不同快捷键应各自独立防抖，避免互相干扰
- 页面卸载前记得清理定时器：避免内存泄漏，可用 abortController 或手动 clearTimeout
