JQuery launch delay

Question

Hope this is quick and easy for someone to find out. I am new to using a lot of javascript / jquery, and I have the following setting to pull the client name from the database and display it when the user has finished entering the client ID.

Everything works fine, but it searches in every keyboard. I know that I can change it to blur, but I want it to search when they go, with a delay .

Here is the current code:

function postData(){ var id = $('#id').val(); $.post('inc/repairs/events-backend.php',{id:id}, function(data){ $("#display_customer").html(data); }); return false; } $(function() { $("#id").bind('keyup',function() {postData()}); }); 

As you can see, this is a binding to each keyword, which means that if you search too fast, this may lead to an incorrect result, since it is still loading. (i.e. if no matches are found, an error is displayed, and dial fast enough so that the user needs a backspace and redials the last number)

Can someone help add a delay to the existing code, and, if possible, a little explanation regarding the change you made, I would rather not just copy and paste without understanding.

---- EDIT ----

This is the code I ended up with, thank you guys!

 function postData(){ var id = $('#id').val(); $.post('inc/repairs/events-backend.php',{id:id}, function(data){ $("#display_customer").html(data); }); return false; } $(function() { var timer; $("#id").bind('keyup input',function() { timer && clearTimeout(timer); timer = setTimeout(postData, 300); }); }); 

Answer 1

You should look at setTimeout and clearTimeout :

 $(function() { var timer; $("#id").on('keyup',function() { timer && clearTimeout(timer); timer = setTimeout(postData, 300); }); }); 

Basically, what we do is that instead of immediately starting the postData function postData we pass it to setTimeout so that it works after a certain time (in this case, 300 milliseconds).

The setTimeout function returns a timer identifier, which then we can go to clearTimeout to cancel this call from ever made. At each key press, before we set a new timer, we first check to see if the timer is set. If there is, we will cancel the old timer before starting a new one.

---

To further improve this, you can interrupt the AJAX call on every keystroke, just in case the user types something after 300+ milliseconds (after the timer has been triggered, but before the AJAX request returns).

---

PS You should check out Ben Alman's throttle / debounce plugin , which works great here.

Answer 2

Take a look at the debounce underline function - this makes this behavior super easy:

 $(function() { $('#id').on('keyup input', _.debounce(postData, 500)) } 

Thus, the postData call will only happen after the user stops printing for 500ms (or what you set to wait for debugging)

In addition, I scrolled the input event to catch additional changes, such as copy / paste in addition to keystrokes (in modern browsers).

Answer 3

I would delay the search a bit in keyup mode, but you also need to cancel the last request, since you cannot predict what order they will execute (or you can use the queue for ajax).

I will describe all three parts:

Delay

Wrap the postData callback in setTimeout . Save the return value of setTimeout as $("#id").data('timeout') and call clearTimeout on it every time so that the event fires only once per character string.

Abort

Save the last request to $("#id").data('lastRequest') or the like. Each time postData is postData , run $("#id").data('lastRequest').abort() . Store the return value of $.post() in this data field. To prevent the error, do the following:

 $("#id").data('lastRequest', {abort: function () {})); 

Queue

 $("#id").data('lastRequest', true); ... $.when($("#id").data('lastRequest')).then(function () { $("#id").data('lastRequest', $.post(...)); }); 

Answer 4

There might be a better way, but here's something from the head:

 window.currentKeyup = 0; $("#id").bind('keyup',function() { window.currentKeyup++; var keyup = window.currentKeyup; setTimeout(function(){ if( keyup == window.currentKeyup ){ postData(); } },3000); });