JavaScript onkeypress事件实现打字指示器消息间隔20秒发送问题

核心采用*节流(throttle)*逻辑控制发送频率，具体实现步骤如下：

• 首先在对应业务作用域定义两个变量：记录上次发送时间的lastSentTypingTime，初始值为0；固定间隔常量TYPING_INTERVAL = 20000（单位毫秒）
• 改造现有onkeypress事件的处理逻辑：每次触发按键事件时，先计算当前时间和lastSentTypingTime的差值，只有差值≥20000时，才执行正在输入消息的发送逻辑，同时更新lastSentTypingTime为当前时间戳；差值不足20秒时直接跳过发送步骤即可
• 可选优化：可以额外加3~5秒的防抖逻辑，监听到用户停止输入后发送「停止输入」的消息，避免接收方长时间看到输入中提示，体验更好

原生JS参考代码如下：

// 作用域内变量定义
let lastSentTypingTime = 0;
const TYPING_NOTIFY_GAP = 20 * 1000; // 20秒发送间隔

// 输入框按键监听逻辑
inputDom.addEventListener('keypress', function() {
  const now = Date.now();
  if (now - lastSentTypingTime >= TYPING_NOTIFY_GAP) {
    // 调用原有发送正在输入消息的方法
    sendTypingStatus();
    // 更新上次发送时间
    lastSentTypingTime = now;
  }
})

如果是React/Vue等框架场景，把lastSentTypingTime存到组件ref/状态里即可，逻辑完全通用。

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