如何实现键盘指定时长无按键触发的JavaScript Event Listener

原生浏览器没有内置名为wait的键盘空闲事件，你可以通过自定义事件+计时器的方式实现完全符合你预期调用形式的能力。

实现逻辑 #

核心思路非常简单：

• 维护一个空闲计时器，每次检测到键盘按键按下时，就清空当前计时器重新开始计时
• 当计时器达到你设定的无操作时长阈值时，主动向document派发wait自定义事件
• 初始化完成后，就可以直接用你写的document.addEventListener('wait', myFunction)形式绑定处理逻辑

可直接运行的实现代码 #

// 在这里配置你需要的无按键触发时长，单位为毫秒，示例为3000毫秒即3秒
const IDLE_KEY_WAIT_TIME = 3000;
let idleTimer = null;

// 初始化wait事件支持
const setupWaitEvent = () => {
  const resetTimer = () => {
    // 每次有按键按下就清空已有计时器，重新计时
    if (idleTimer) clearTimeout(idleTimer);
    idleTimer = setTimeout(() => {
      // 达到等待时长后派发自定义wait事件
      document.dispatchEvent(new Event('wait'));
    }, IDLE_KEY_WAIT_TIME);
  };

  // 绑定键盘按下事件触发计时器重置
  document.addEventListener('keydown', resetTimer);
  // 页面加载后启动首次计时
  resetTimer();
};

// 执行初始化
setupWaitEvent();

// 以下就是你期望的调用形式
function myFunction() {
  // 这里写触发后的业务逻辑
  console.log('指定时长内无任何按键按下');
}
document.addEventListener('wait', myFunction);

可选扩展 #

• 如果需要动态修改等待时长，只要把IDLE_KEY_WAIT_TIME改成可变变量，重置计时器时读取最新值即可
• 如果需要给事件处理函数传递额外参数，可以把普通Event替换为CustomEvent，通过detail字段携带参数
• 如果要把鼠标移动、点击、滚动等其他用户操作也纳入无操作判定范围，只要给对应事件也绑定resetTimer重置逻辑即可

内容的提问来源于stack exchange，提问作者Daniel Pozzan