Попытка добавить задержку в запрос jQuery AJAX
Я пытаюсь задержать запрос AJAX, чтобы он был отправлен через 2-3 секунды после последнего нажатия клавиши входной ячейки.
До сих пор мне удавалось задерживать запросы, но через 2-3 секунды я получаю один запрос, отправленный для каждого ключа в поле...
Как я могу заставить jQuery отменить первые и просто отправить Последний ключ?
Вот код до сих пор:
$('#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, но я не смог реализовать их в своем проекте из-за моих небольших знаний программирования.
[решено] Окончательный рабочий код, Спасибо @доктор Молле:
$('#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);
}
}
3 ответов
сохраните тайм-аут в переменной, чтобы вы могли очистить последние тайм-ауты:
clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);
то, что вы пытаетесь сделать, называется debouncing.
здесь плагин jquery Бен Альман, который делает эту работу.
и подчеркивания.js включает в себя эту функцию.
нет нет необходимости взломать систему запросов ajax. Просто убедись, что он звонит в нужный момент.
Мне нравится ответ 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 и отправит новый запрос. Это полезно, когда вы
Typed - > waited 4 sec - >request sent - >typed again (ответ не получен)->waited 4 second - >another request fires