Trying to add delay to jQuery AJAX request
Solution 1
store the timeout in a variable, so you will be able to clear recent timeouts:
clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);
Solution 2
What you are trying to do is called debouncing.
Here's a jquery plugin by Ben Alman that does the job.
And underscore.js includes this functionality as well.
There's really no need to hack the ajax request system. Just make sure it's called at the right moment.
krasatos
Health Economist & Amateur Programmer and Web Developer
Updated on June 19, 2022Comments
-
krasatos almost 2 years
I am trying to delay an AJAX request so that it is sent out 2-3 seconds after the LAST keyup of an input cell.
So far I have managed to delay the requests, but after 2-3 seconds I get one request sent for every keyup in the field...
How can I make jQuery cancel the first ones and just send the last keyup?
Here's the code so far:$('#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 sec then sends 4-5 AJAX requests depending on keypresses. I just want one sent after the last
keyup
I have found some similar solutions in StackOverflow that use Javascript, but I have not been able to implement them to my project due to my small knowledge of programming.[SOLVED] Final working code, thanks to @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's 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); } }