试图增加延迟到jQuery的AJAX请求 [英] Trying to add delay to jQuery AJAX request
问题描述
我试图拖延一个AJAX请求,使其输入单元的最后一个KEYUP发出后2-3秒。
到目前为止,我已经成功地延缓了请求,但2-3秒后,我得到一个请求派人在现场每一个KEYUP ...
如何让jQuery的取消第一个的人,只是发送最后KEYUP?
这里的code到目前为止:
$('#姓氏)。重点(函数(){
$('方面:输入。)VAL(); //清除其他搜索领域
})。KEYUP(函数(){
帽(本); //另一个函数,大写领域
$型= $(本).attr(ID); //刚好路过所需的搜索类型到PHP文件
的setTimeout(函数(){//设置延迟每个键preSS
ajaxSearchRequest($类型); //运行Ajax请求
},1000);
});
这code以上,等待1秒钟,然后将取决于关键presses 4-5 AJAX请求。
我只想一个接一个,最后发送 KEYUP
我发现在StackOverflow的一些类似的解决方案,使用JavaScript,但我一直无法将其落实到我的项目,由于规划我的小知识。
[求助] 最后工作code,感谢@ Dr.Molle:
$('#姓氏)。重点(函数(){
$('方面:输入。)VAL();
})。KEYUP(函数(){
帽(本);
$型= $(本).attr(ID);
window.timer = setTimeout的(功能(){//设置延迟每个键preSS
ajaxSearchRequest($类型); //运行Ajax请求
},3000);
})KEYDOWN(函数(){clearTimeout(window.timer);});
这里的 ajaxSearchRequest
code:
函数ajaxSearchRequest($型){
VAR ajaxRequest2; //让Ajax成为可能的变量!
尝试{
//歌剧8.0+,火狐,Safari浏览器
ajaxRequest2 =新XMLHtt prequest();
}赶上(五){
// Internet Explorer浏览器
尝试{
ajaxRequest2 =新的ActiveXObject(MSXML2.XMLHTTP);
}赶上(五){
尝试{
ajaxRequest2 =新的ActiveXObject(Microsoft.XMLHTTP);
}赶上(五){
// 出了些问题
警报(浏览器的错误!);
返回false;
}
}
}
ajaxRequest2.onreadystatechange =功能(){
如果(ajaxRequest2.readyState == 4){
$结果= ajaxRequest2.responseText;
$('#resultcontainer)HTML($结果)。
}}
VAR搜索关键词=的document.getElementById($型).value的;
?搜索关键词=VAR查询字符串= +搜索关键词+&放大器;类型=+ $类型;
如果(搜索关键词!==){
ajaxRequest2.open(GET,searchrequest.php+
查询字符串,真实);
ajaxRequest2.send(空);
}
}
存储超时在一个变量,这样你就可以清除近期超时:
clearTimeout(window.timer);
window.timer = setTimeout的(功能(){//设置延迟每个键preSS
ajaxSearchRequest($类型); //运行Ajax请求
},3000);
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);
}
}
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);
这篇关于试图增加延迟到jQuery的AJAX请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!