Trying to add delay to jQuery AJAX request

Question

I am trying to defer an AJAX request so that it is sent 2-3 seconds after the LAST keyboard of the input cell.
So far I have been able to defer requests, but after 2-3 seconds I get one request sent for each keyboard in the field ...
How can I get jQuery to cancel the first ones and just send the last keyboard?
Here's the code for now:

$('#lastname').focus(function(){ $('.terms :input').val(""); //clears other search fields }).keyup(function(){ caps(this); //another function that capitalizes the field $type = $(this).attr("id"); // just passing the type of desired search to the php file setTimeout(function(){ // setting the delay for each keypress ajaxSearchRequest($type); //runs the ajax request }, 1000); }); 

This code above waits 1 second and then sends 4-5 AJAX requests depending on the keystrokes. I just want one to send after the last keyup
I found several similar solutions in StackOverflow that use Javascript, but I could not implement them in my project due to my little programming knowledge.

[SOLVED] Final working code, thanks @ Dr.Molle:

 $('#lastname').focus(function(){ $('.terms :input').val(""); }).keyup(function(){ caps(this); $type = $(this).attr("id"); window.timer=setTimeout(function(){ // setting the delay for each keypress ajaxSearchRequest($type); //runs the ajax request }, 3000); }).keydown(function(){clearTimeout(window.timer);}); 

Here is the ajaxSearchRequest code:

 function ajaxSearchRequest($type){ var ajaxRequest2; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest2 = new XMLHttpRequest(); }catch (e){ // Internet Explorer Browsers try{ ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // Something went wrong alert("Browser error!"); return false; } } } ajaxRequest2.onreadystatechange = function(){ if(ajaxRequest2.readyState == 4){ $result = ajaxRequest2.responseText; $('#resultcontainer').html($result); }} var searchterm = document.getElementById($type).value; var queryString ="?searchterm=" + searchterm +"&type=" +$type; if(searchterm !== ""){ ajaxRequest2.open("GET", "searchrequest.php" + queryString, true); ajaxRequest2.send(null); } } 

Answer 1

save the timeout in a variable so you can clear the last timeouts:

 clearTimeout(window.timer); window.timer=setTimeout(function(){ // setting the delay for each keypress ajaxSearchRequest($type); //runs the ajax request }, 3000); 

Answer 2

What you are trying to do is called debouncing .

Here's a jquery plugin from Ben Alman that does the job.

And underscore.js also includes this feature.

There really is no need to crack the ajax request system . Just make sure he calls at the right time.

Answer 3

I like Molle's answer. But I would like to further improve performance.

 var ajaxRequest2; // The variable that makes Ajax possible! function getAjaxObject() { try{ // Opera 8.0+, Firefox, Safari ajaxRequest2 = new XMLHttpRequest(); }catch (e){ // Internet Explorer Browsers try{ ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // Something went wrong alert("Browser error!"); // return false; } } } return ajaxRequest2; } getAjaxObject(); function ajaxSearchRequest($type){ if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false) { return; } ajaxRequest2.abort(); ajaxRequest2.onreadystatechange = function(){ if(ajaxRequest2.readyState == 4){ $result = ajaxRequest2.responseText; $('#resultcontainer').html($result); }} var searchterm = document.getElementById($type).value; var queryString ="?searchterm=" + searchterm +"&type=" +$type; if(searchterm !== ""){ ajaxRequest2.open("GET", "searchrequest.php" + queryString, true); ajaxRequest2.send(null); } } 

This change will abort the incoming ajax request and send a new request. It is useful when you

Typed-> waiting 4 seconds → request sent → printed again (no response received) → waiting 4 seconds-> another request is triggered