Cố gắng thêm thời gian trễ vào yêu cầu jQuery AJAX

Question

Tôi đang cố trì hoãn yêu cầu AJAX sao cho nó được gửi đi 2-3 giây sau khi khóa LAST của ô nhập.
Cho đến nay tôi đã quản lý để trì hoãn các yêu cầu, nhưng sau 2-3 giây, tôi nhận được một yêu cầu được gửi cho mọi khóa ...
Làm cách nào để jQuery có thể hủy các yêu cầu đầu tiên và chỉ gửi khóa cuối cùng?
Dưới đây là đoạn mã cho đến nay:

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

Mã này trên, đợi 1 giây sau đó gửi 4-5 yêu cầu AJAX tùy thuộc vào bấm phím. Tôi chỉ muốn được gửi sau keyup
Tôi đã tìm thấy một số giải pháp tương tự trong StackOverflow sử dụng Javascript, nhưng tôi không thể triển khai chúng cho dự án của mình do kiến ​​thức lập trình nhỏ của tôi.

[SOLVED] mã làm việc cuối cùng, nhờ @ 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);}); 

Dưới đây là đoạn code 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

cửa hàng thời gian chờ trong một biến, vì vậy bạn sẽ có thể để xóa thời gian chờ gần đây:

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

     }, 3000); 

Answer 2

Tôi thích Molle's an swer Nhưng tôi sẽ tiếp tục cải thiện hiệu suất

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

Thay đổi này sẽ hủy bỏ yêu cầu ajax và gửi yêu cầu mới. Nó rất hữu ích khi bạn

Typed-> chờ 4 giây -> yêu cầu gửi -> gõ lại (phản ứng chưa nhận được) -> đợi 4 thứ hai> yêu cầu khác cháy

Answer 3

gì bạn đang cố gắng làm là gọi debouncing.

Đây là một jquery plugin bởi Ben Alman thực hiện công việc.

Và underscore.js cũng bao gồm chức năng này.

Có thực sự không cần phải hack hệ thống yêu cầu ajax. Chỉ cần chắc chắn rằng nó được gọi là vào đúng thời điểm.