为什么JS中setInterval仅首次运行正常，后续触发执行间隔越来越短？

• 误用setInterval：你需要的是延迟1秒执行一次清空操作，而setInterval会每隔1秒重复执行清空，不符合需求
• 未清理定时器：每次keyup事件触发都会生成新的定时器，旧定时器没有被销毁，多个定时器同时运行就会导致清空操作触发频率越来越高，看起来就是间隔变短

我们改用setTimeout实现，同时每次按键时先清除之前的待执行定时器，重置计时：

var personTyping = document.getElementById('typingArea');
var isTypingPlace = document.getElementById('isTypingPlace');
// 存储定时器ID，方便清理
var typingTimer = null;

personTyping.addEventListener('keypress', () => {
  // 每次按键先清除之前的待清空定时器
  clearTimeout(typingTimer);
  isTypingPlace.innerHTML = "正在输入...";
})
personTyping.addEventListener('keyup', () => {
  // 每次按键抬起后，重置1秒倒计时
  clearTimeout(typingTimer);
  typingTimer = setTimeout(() => {
    isTypingPlace.innerHTML = "";
  }, 1000)
})

对应HTML部分保持原有逻辑即可：

<html lang="en" dir="rtl">
<div id="typingArea"><input type="text"></div>
<p id="isTypingPlace"></p>

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