Run javascript function when user finishes typing instead of on key up?

Question

I want to trigger an ajax request when the user has finished typing in a text box. I don't want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests, however I don't want them to have to hit the enter button either.

Is there a way so I can detect when the user has finished typing and then do the ajax request?

Using jQuery here! Dave

Answer 1

So, I'm going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, let's start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions...

//setup before functions var typingTimer;                //timer identifier var doneTypingInterval = 5000;  //time in ms, 5 seconds for example var $input = $('#myInput');  //on keyup, start the countdown $input.on('keyup', function () {   clearTimeout(typingTimer);   typingTimer = setTimeout(doneTyping, doneTypingInterval); });  //on keydown, clear the countdown  $input.on('keydown', function () {   clearTimeout(typingTimer); });  //user is "finished typing," do something function doneTyping () {   //do something } 

Answer 2

The chosen answer above does not work.

Because typingTimer is occassionaly set multiple times (keyup pressed twice before keydown is triggered for fast typers etc.) then it doesn't clear properly.

The solution below solves this problem and will call X seconds after finished as the OP requested. It also no longer requires the redundant keydown function. I have also added a check so that your function call won't happen if your input is empty.

//setup before functions var typingTimer;                //timer identifier var doneTypingInterval = 5000;  //time in ms (5 seconds)  //on keyup, start the countdown $('#myInput').keyup(function(){     clearTimeout(typingTimer);     if ($('#myInput').val()) {         typingTimer = setTimeout(doneTyping, doneTypingInterval);     } });  //user is "finished typing," do something function doneTyping () {     //do something } 

And the same code in vanilla JavaScript solution:

//setup before functions let typingTimer;                //timer identifier let doneTypingInterval = 5000;  //time in ms (5 seconds) let myInput = document.getElementById('myInput');  //on keyup, start the countdown myInput.addEventListener('keyup', () => {     clearTimeout(typingTimer);     if (myInput.value) {         typingTimer = setTimeout(doneTyping, doneTypingInterval);     } });  //user is "finished typing," do something function doneTyping () {     //do something } 

This solution does use ES6 but it's not necessary here. Just replace let with var and the arrow function with a regular function.