Javascript搜索延迟并从eventlistener收集输入

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

现在发生了什么 我键入

a

并等待。然后我快速键入

bcd

并等待。然后

ef

快速等待。它赶上了我不想要的。我希望它收集我键入的内容，但在延迟完成之前不输出它

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

我想发生什么

var搜索计时器；
addEventListener（“DOMContentLoaded”，（）=>{
document.querySelector（“#search”）.addEventListener（“输入”，（e）=>{
searchtimer=setTimeout（（）=>{
console.log（如target.value）；
clearTimeout（搜索计时器）；
}, 1000);
});
});
逐步解释的解决方案

所以你需要

下面的代码显示了仅当两次击键之间的时间差至少为2秒时如何执行函数


let count=0；
//如果我们直接从HTML调用它，函数将
//每单击一次就会被激发，这会妨碍性能
让myFunction=（）=>{
document.querySelector（“#demo”）.innerHTML=“Hello World”+++count；
}
//因此，我们将从HTML中调用此去Bouncing包装函数
设myFunc=letsDebounce（myFunction，2000）；
//包装器调用setTimeout以在之后执行其参数fn
//指定的延迟，但如果触发事件再次触发
//在setTimeout持续时间结束之前，计时器将重置
//因此，前面的调用被忽略
函数letsDebounce（fn，d）{
让定时器；
返回函数（）{
清除超时（计时器）；
定时器=设置超时（fn，d）；
}
}
Debounce
您的预期行为看起来像是
debounce

在我看来，在创建新的超时之前，您应该
clearTimeout


var搜索计时器；
addEventListener（“DOMContentLoaded”，（）=>{
document.querySelector（“#search”）.addEventListener（“输入”，（e）=>{
clearTimeout（搜索计时器）；//{
console.log（如target.value）；
}, 1000);
});
});
签出。@DontVoteMeDown是的，OPs代码为每个
输入
事件启动一个新的超时，但OP不需要“另一个计时器来获取输入端”。在创建新超时之前清除超时，它应该按预期工作（在超时已经发生时清除超时没有多大意义…）@安德烈亚斯：是的，你是对的，这是一样的。@安德烈亚斯：是的，就是这样！myjscoffee，我对评论进行了编辑（希望）更加清晰，并添加了一个参考链接。我对代码本身所做的唯一更改是在
timer=setTimeout（fn，d）行中。如果您不认为这些更改是一种改进，请随时恢复到原始版本。@当然，谢谢您使其更具可读性并改进了文章
a
.
.
.
b c d
.
.
.
e f