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

Question

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

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"后释放最后两个键。我该如何防止这种情况发生？

Answer 1

代码中的问题：

当你快速打字时，两个键(baardzorg的r和g(往往会同时释放(在正常情况下不会发生(。同时按下和保留按键再现了该问题。有两个keyup事件，在这两种情况下，事件都匹配，并触发console.log。

已解决：

如果你想使用"keyup"来实现这一点，你可以使用这个名为debouncing的概念。只有当输入延迟时，才需要调用函数，确切地说，用户已经停止了几毫秒的输入。这些大多用于搜索引擎，因为不为每个键入的单词调用api(用于获取频繁搜索的单词或在电子商务搜索中列出产品(，为每个搜索的单词调用api将花费大量成本。一旦输入延迟，它就会调用api。请参阅下面的代码：

var inputSelector = document.querySelector('#fname');
const findMatch = () => {
var inputNaam = inputSelector.value;
inputNaam.toLowerCase();
if(inputNaam.length === 9 && inputNaam.includes('baardzorg')){
console.log('match')
}
}
const debounce = function (fn, d) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
findMatch.apply();
}, d);
}
}
const onFinishTyping = debounce(findMatch, 300);

<input type="text" id="fname" onkeyup="onFinishTyping()" name="fname"><br><br>

Answer 2

您应该使用onChange或onBlur而不是keyup事件。