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

Question

我有一个简单的输入框。当我写东西的时候，我希望它能被推迟。我遇到的问题是在非常快地写入字符时出现延迟后，它会多次调用 console.log 。

现在发生什么事

我打字a并等待。然后我b c d快速打字并等待。然后e f快速等待。它赶上了我不想要的。我希望它收集我输入的内容，但在延迟完成之前不输出它。

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

我想要发生什么

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

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

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

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">

更详细的解释：

• 它基本上是一种从输入中消除不需要的信号的方法。因此，如果定义的持续时间尚未过去，则应通过以下方式消除先前的操作clearTimeout(searchtimer);
• 主题演讲：操作员跟踪最新值。

阅读文章“RxJS 中的throttleTime vs debounceTime”以详细了解。