如何在keyup事件延迟结束后获取完整输入数字？

你的代码目前只是在维护输入的buffer和记录按键时间，但没有设置延迟触发最终结果的逻辑——也就是说，你没有在用户停止输入（超过设定的1秒间隔）后，去提取完整的输入数字。所以每次按键都会更新buffer，但始终没有输出你要的最终结果。

要实现需求，你需要借助定时器：每次用户按键时，先清除之前未触发的定时器，然后重新设置新的定时器。只有当用户在1秒内没有再次按键时，这个定时器才会触发，此时就能拿到完整的输入数字了。另外还要注意过滤非数字按键，避免混入无效字符。

修改后的代码如下：

const keystrokeDelay = 1000;
let state = {
  buffer: [],
  lastKeyTime: Date.now(),
  timerId: null // 新增定时器ID，用于清除未触发的定时器
};

document.addEventListener('keyup', event => {
  const key = event.key;
  // 只处理0-9的数字按键，过滤其他字符
  if (!/^\d$/.test(key)) return;

  const currentTime = Date.now();
  let buffer = [];

  // 保留原有的buffer重置逻辑
  if (currentTime - state.lastKeyTime > keystrokeDelay) {
    buffer = [key];
  } else {
    buffer = [...state.buffer, key];
  }

  // 更新状态
  state = { ...state, buffer, lastKeyTime: currentTime };

  // 清除之前的定时器，避免多次触发
  if (state.timerId) {
    clearTimeout(state.timerId);
  }

  // 设置新的定时器，延迟后处理最终结果
  state.timerId = setTimeout(() => {
    const fullNumber = state.buffer.join('');
    console.log('完整输入的数字：', fullNumber);
    // 这里可以添加你需要的后续逻辑，比如把数字传给其他业务函数

    // 可选：处理完后清空buffer，准备下一轮输入
    state.buffer = [];
  }, keystrokeDelay);
});

关键改动说明： #

• 新增timerId字段管理定时器，每次按键都清除之前的定时器，确保只有用户停止输入后才会触发最终逻辑
• 添加数字按键过滤，只允许0-9的字符进入buffer
• 在定时器回调里将buffer拼接成完整字符串，这就是你需要的最终结果，可根据需求扩展后续处理逻辑

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