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

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

您的代码中的问题：

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

解决了：

如果您要使用“keyup”来实现这一点，您可以使用这个称为去抖动的概念。 只有在输入延迟时才需要调用 function，确切地说是用户已经停止输入几毫秒。这些主要用于搜索引擎，因为不为每个输入的单词调用 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事件。