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

Question

I'm testing some code to check if input includes a string. It works fine however when I type rapidly it get's triggered twice? Can someone explain why and how I can fix it?

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')
    }
})

I think this happens because if I type rapidly I will release the two last keys after I finished typing 'baardzorg'. How can I prevent this from happening?

Answer 1

Problem in your code:

When you are typing fast, the two keys ( r and g of baardzorg) tend to be released at the same time ( it doesn't happen in normal case ). Pressing and leaving the keys together reproduced the issue. There are two keyup events and in both the cases the event matches and console.log is triggered.

Solved:

You can use this concept called debouncing if you are to achieve this using 'keyup'. you need to call the function only when there is delay in typing, exactly saying the user has stopped typing for a few millisecond.These are used in search engines mostly, for not to call an api for each typed word ( for getting frequently searched word or in ecommerce searches to list products), it would cost a lot to call an api for each searched word. It will call the api once there is delay in typing. Please see the code below:

 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

You should use onChange or onBlur instead of keyup event.