JavaScript如何追踪按键按下时长？Delete键计时错误排查

开发者阿泽

2026-8-26

逻辑错误说明

原代码存在两个核心问题，直接导致计时偏差：

未处理系统按键重复触发逻辑：长按按键时，操作系统会按固定频率重复触发keydown事件，直到按键松开触发keyup。原代码每次接收到Delete键的keydown事件都会重新给startTime赋值，最终记录的开始时间是按键松开前最后一次keydown触发的时间，而非首次按下的时间，计算出的按压时长自然远小于实际值。
事件回调未显式声明event入参：直接依赖全局挂载的event对象属于非标准实现，在部分现代浏览器、严格模式下会出现事件对象取值失败的问题。

修正方法

调整逻辑：仅在首次检测到Delete键按下、且当前没有处于按压记录状态时，才记录开始时间；后续重复触发的keydown直接跳过，不重置时间；松开按键计算完时长后清空记录标记，等待下一次按压。

修正后的完整代码如下：

let startTime = null;

document.body.onkeydown = function(event) {
  const key = event.key;
  if (key === 'Delete') {
    // 已处于按压状态时，跳过重复触发的keydown事件
    if (startTime !== null) return;
    console.log('key down');
    startTime = Date.now();
  }
}

document.body.onkeyup = function(event) {
  const key = event.key;
  if (key === 'Delete' && startTime !== null) {
    console.log('key up');
    const endTime = Date.now();
    const pressDuration = (endTime - startTime) / 1000;
    if (pressDuration > 3) {
      console.log('cool');
    }
    console.log(`${pressDuration} sec`);
    // 重置标记，准备下一次按压检测
    startTime = null;
  }
}