Блог

Я тестирую некоторый код, чтобы проверить, содержит ли ввод строку. Это работает нормально, однако, когда я быстро печатаю, это срабатывает дважды! Кто-нибудь может объяснить, почему и как я могу это исправить?

 
var inputSelector = document.querySelector('input[name="category"]');

inputSelector.addEventListener('keyup', function(){
    var inputNaam = inputSelector.value;
    inputNaam.toLowerCase();
    if(inputNaam.length === 9 amp;amp; inputNaam.includes('baardzorg')){
            console.log('match')
    }
})
  

Я думаю, это происходит потому, что если я буду печатать быстро, я отпущу две последние клавиши после того, как закончу вводить ‘baardzorg’. Как я могу предотвратить это?

Проблема в вашем коде:

Когда вы печатаете быстро, две клавиши (r и g baardzorg), как правило, высвобождаются одновременно (в обычном случае этого не происходит). Одновременное нажатие и оставление клавиш повторило проблему. Есть два события ввода, и в обоих случаях событие совпадает с консолью.запускается журнал.

Решаемая:

Вы можете использовать эту концепцию, называемую debouncing, если хотите добиться этого с помощью ‘keyup’. вам нужно вызывать функцию только при задержке ввода, точно говоря, что пользователь перестал печатать на несколько миллисекунд.В основном они используются в поисковых системах, чтобы не вызывать api для каждого введенного слова (для получения часто просматриваемого слова или при поиске в электронной коммерции для перечисления товаров), вызов api для каждого искомого слова обошелся бы дорого. Он вызовет api, как только возникнет задержка при наборе текста. Пожалуйста, посмотрите код ниже :

 var inputSelector = document.querySelector('#fname');

const findMatch = () => {
  var inputNaam = inputSelector.value;
  inputNaam.toLowerCase();
  if(inputNaam.length === 9 amp;amp; 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 события.