JavaScript如何实现输入框输入状态定时检测并按需调用函数

解决方案 #

核心逻辑调整说明 #

• 移除输入框行内的onKeyPress绑定，避免每次按键都触发handleMessagePress
• 新增3个状态变量分别标记当前周期是否有输入、检测计时器、检测流程运行状态
• 首次按键时触发一次handleMessagePress并启动5秒周期检测，后续每个周期结束时根据是否有输入触发对应函数，无输入时终止检测流程

完整可运行代码 #

<input placeholder="type your message" id="messageInputField" />

<script>
const myInput = document.getElementById("messageInputField");
// 状态变量：当前5秒周期内是否有输入
let isTypingInPeriod = false;
// 5秒检测计时器
let detectTimer = null;
// 检测流程是否已启动
let detectRunning = false;
// 如需要在周期调用时传入事件对象，可新增变量存储最新事件
// let latestEvent = null;

const stop = () => {
  console.log("user stop typing");
  // 停止检测流程，等待下次输入重新启动
  detectRunning = false;
}

const handleMessagePress = (e) => {
  console.log("user is typing");
}

if (myInput) {
  // 监听输入事件，仅更新状态不直接触发业务函数
  myInput.addEventListener("keydown", (e) => {
    isTypingInPeriod = true;
    // latestEvent = e;
    // 检测流程未启动时，首次输入触发流程
    if (!detectRunning) {
      detectRunning = true;
      // 首次输入直接调用一次业务函数
      handleMessagePress(e);
      // 启动第一个5秒检测周期
      startDetectCycle();
    }
  })
}

// 5秒检测周期逻辑
function startDetectCycle() {
  // 清除旧计时器避免重复
  clearTimeout(detectTimer);
  detectTimer = setTimeout(() => {
    if (isTypingInPeriod) {
      // 本周期有输入，触发业务函数，需要事件参数可传入latestEvent
      handleMessagePress();
      // 重置状态进入下一个周期
      isTypingInPeriod = false;
      startDetectCycle();
    } else {
      // 本周期无输入，触发停止函数
      stop();
    }
  }, 5000)
}
</script>

提示：如果handleMessagePress逻辑依赖事件对象参数，可放开代码中注释的存储最新事件的相关逻辑，周期调用时传入存储的事件对象即可。

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