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

问题描述

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

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

解决方法

您的代码中的问题：

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

已解决：

如果要使用“键”实现此目的，则可以使用称为反跳的概念。您只需要在输入出现延迟时才调用该函数，确切地说是用户已停止输入几毫秒。这些通常用于搜索引擎中，因为它们不会为每个键入的单词调用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>

,

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