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

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

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

Answer 2

你的代码有问题：

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

已解决：

如果要使用 'keyup' 实现此目的，则可以使用这个称为去抖动的概念。您只需要在输入延迟时调用该函数，确切地说用户已经停止输入几个 millisecond.These 主要用于搜索引擎，因为不为每个输入的单词调用 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>

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

How to set a delay before a listener event is triggered for the second time

javascript

input

dom-events

event-listener

keyup