试图为jQuery AJAX请求添加延迟

我试图延迟一个AJAX请求，以便在输入单元的最后一个键盘后2-3秒发送它。
到目前为止，我已设法延迟请求，但在2-3秒后，我收到一个请求发送给该字段中的每个密钥…
如何让jQuery取消第一个并发送最后一个keyup？
这是迄今为止的代码：

$('#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); }); 

上面的代码等待1秒，然后根据按键发送4-5个AJAX请求。 我只想在最后一个keyup后发送一个
我在StackOverflow中发现了一些使用Javascript的类似解决方案，但由于我对编程知之甚少，我无法将它们实现到我的项目中。

[已解决]最终工作代码，感谢@ 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);}); 

这是ajaxSearchRequest代码：

 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

将超时存储在变量中，这样您就可以清除最近的超时：

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

Answer 2

你要做的是被称为去抖动 。

这是Ben Alman的一个jquery插件 ，可以完成这项工作。

而underscore.js也包含此function。

真的没有必要破解ajax请求系统 。 只要确保在适当的时候调用它。

Answer 3

我喜欢Molle的回答但我会进一步提高性能

 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); } } 

此更改将中止正在进行的ajax请求并发送新请求。 这对你很有帮助

键入 – >等待4秒 – >请求发送 – >再次键入（响应未收到） – >等待4秒 – >另一个请求发生