Javascript 搜索延迟并从事件监听器收集输入

Question

我有一个简单的输入框。当我写东西时，我希望它被延迟。我遇到的问题是在非常快地写入字符的延迟之后，它会多次调用console.log。
现在发生什么事
我输入 a等待。然后我输入 b c d快速等待。然后e f快速等待。它 catch 了我不想要的。我希望它收集我输入的内容，但在延迟完成之前不输出它。

a
.
.
.
b c d
b c d
b c d
.
.
.
e f
e f

我想要发生的事情

a
.
.
.
b c d
.
.
.
e f

var searchtimer;

window.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#search").addEventListener("input", (e) => {
    searchtimer = setTimeout(() => {
      console.log(e.target.value);
      clearTimeout(searchtimer);
    }, 1000);
  });
});

<input id="search" type="text">

Answer 1

您的预期行为类似于 debounce .
在我看来你应该clearTimeout在创建新的之前。

var searchtimer;
window.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#search").addEventListener("input", (e) => {
    clearTimeout(searchtimer); // <--- The solution is here
    searchtimer = setTimeout(() => {
      console.log(e.target.value);
    }, 1000);
  });
});

<input id="search" type="text">

更详细的解释:

它基本上是一种从输入中消除不需要的信号的方法。所以如果定义的持续时间还没有过去，前面的 Action 应该被 clearTimeout(searchtimer); 消除。

主题演讲:运算符(operator)跟踪最新的值。

阅读帖子 "throttleTime vs debounceTime in RxJS"详细了解。