Doug Fir Doug Fir - 1 month ago 5
Javascript Question

trigger function when someone has stopped typing for 1 second

I have an input field which generates auto suggestions when someone starts typing. The user does not need to blur or hit a submit button for the suggestions to appear.

When someone has stopped typing I would like to run a function for tracking which products were shown to the user, along with the string of text currently in input field.

I added an 'input' event listener but I cannot get my logic right.

I want to

doStuff()
if it has been at least 1 second since the previous input event. Trouble is that my script is firing when a user starts typing not after since it's based on 'change' event listener.

And I'm thinking there must be a more logical way than I'm doing now.

Also I'm worried that 'input' event is impacting the users browser since it's running on every keystroke, maybe there's a better way?

Reluctantly showing my code block below even though it does not make much sense and is one of my weaker scripting moments, more showing that I have been trying different things. Would prefer a solution that ignores the insane logic I have been using.

I want to
doStuff(e)
when a user has 'stopped entering text in input' which is not an exact definition. When is a user considered to have stopped typing? For now I'm saying 1 second.

Don't want to use change event since it misses a lot of events where the user does not blur.

Prefer pure JS.

var input = document.querySelector('#search_input');
var newinput;
var lastinput;
var diff;

input.addEventListener('input', function(e) {

newinput = new Date();
if(!lastinput) {
lastinput = new Date()
}
diff = newinput - lastinput;
if(diff > 500 && diff < 2000) {
doStuff(e)
}

lastinput = newinput;

}, false);

Answer

You can use the input event listener together with setTimeout() and clearTimeout() as follows:

var timeoutID;

document.querySelector('#search_input').addEventListener('input', function(e) {
  clearTimeout(timeoutID);
  timeoutID = setTimeout(function() {
    alert("1 second has passed since any input was received.");
    // doStuff()
  }, 1000);
});
<input id="search_input">

The setTimeout() function queues up the function you pass it in the first argument to be executed after the specified number of milliseconds have passed. The clearTimeout() function cancel a currently scheduled timeout based on the id returned by setTimeout().

So the function I've shown above basically says that whenever an input event occurs, cancel any previously scheduled timeout and then create another. Thus the code in the inner function will only be run approximately 1 second after the user stops typing.

Comments