Javascript 如何在第二次触发侦听器事件之前设置延迟

我正在测试一些代码，以检查输入是否包含字符串。它工作正常，但当我快速键入时，它会被触发两次！有人能解释一下我为什么以及如何修复它吗

var inputSelector=document.querySelector（'input[name=“category”]”）；
inputSelector.addEventListener（'keyup'，function（）{
var inputNaam=inputSelector.value；
inputNaam.toLowerCase（）；
if（inputNaam.length==9&&inputNaam.includes（'baardzorg'））{
console.log（'match'）
}
})

---

我认为这是因为如果我快速输入，我会在输入完“baardzorg”后释放最后两个键。如何防止这种情况发生？

您应该使用

onChange

或

onBlur

而不是

keyup

事件。

代码中的问题：

当您快速键入时，两个键（baardzorg的r和g）往往会同时释放（正常情况下不会发生这种情况）。按下并将按键保持在一起会再现该问题。有两个keyup事件，在这两种情况下都会触发事件匹配和console.log

已解决：

如果要使用“键控”实现这一点，可以使用称为“去抖动”的概念。只有当输入延迟时，您才需要调用该函数，确切地说用户已停止输入几毫秒。这些函数主要用于搜索引擎，用于不为每个输入的单词调用api（用于获取频繁搜索的单词或在电子商务搜索中列出产品），为每个搜索词调用一个api会花费很多。一旦输入延迟，它将调用api。请参阅下面的代码：

var-inputSelector=document.querySelector（'#fname'）；
常量findMatch=（）=>{
var inputNaam=inputSelector.value；
inputNaam.toLowerCase（）；
if（inputNaam.length==9&&inputNaam.includes（'baardzorg'））{
console.log（'match'）
}
}
常数反盎司=函数（fn，d）{
让定时器；
返回函数（）{
清除超时（计时器）；
计时器=设置超时（（）=>{
findMatch.apply（）；
}（d）；
}
}
常数onFinishTyping=去盎司（findMatch，300）