如何防止重複的AJAX呼叫？

Question

我目前正在構建一個簡單的AJAX調用應用程序，它會在它裏面輸入一些文本後顯示一個文本框的結果：

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
    }; 
})(); 

$(document).ready(function(e) { 

    $("input[name=html]").keyup(function(e) { 
     if(this.value.length > 1) {   
      e.preventDefault(); 
      var form = $(this).closest('form'); 
      var form_data = form.serialize(); 
      var form_url = form.attr("action"); 
      var form_method = form.attr("method").toUpperCase(); 
      delay(function(){ 
       $("#loadingimg").show(); 
       $.ajax({ 
        url: form_url, 
        type: form_method,  
        data: form_data,  
        cache: false, 
        success: function(returnhtml){       
         $("#result").html(returnhtml); 
         $("#loadingimg").hide();      
        }   
       });  
      },1000); 
     } 
    }); 

}); 

Fiddle Demo

正如你可以從上面的演示看，例如，如果你輸入test,test1或test2或任何單詞，只要它們的長度大於1，那麼它將發起AJAX調用。

我的問題是，有什麼辦法可以讓我防止重複的AJAX調用？例如，如果我再次在文本框中鍵入測試，它會立即在div中顯示測試，而不會再發出另一個AJAX調用來再次獲取結果。非常感謝你提前。

Answer 1

您只需緩存先前的結果，並在進行ajax調用之前檢查緩存以查看緩存中是否已有該結果。

在Javascript中，人們通常使用一個對象的緩存：

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
    }; 
})(); 

// create cache for ajax results 
// the key is the form_data 
// the value is whatever the ajax call returns 
var ajaxCache = {}; 

$(document).ready(function(e) { 

    $("input[name=html]").keyup(function(e) { 
     if(this.value.length > 1) {   
      e.preventDefault(); 
      var form = $(this).closest('form'); 
      var form_data = form.serialize(); 
      // check the cache for a previously cached result 
      if (ajaxCache[form_data]) { 
       // this uses delay, only so that it clears any previous timer 
       delay(function() { 
        $("#result").html(ajaxCache[form_data]); 
        $("#loadingimg").hide(); 
       }, 1); 
      } else { 
       var form_url = form.attr("action"); 
       var form_method = form.attr("method").toUpperCase(); 
       delay(function(){ 
        $("#loadingimg").show(); 
        $.ajax({ 
         url: form_url, 
         type: form_method,  
         data: form_data,  
         cache: false, 
         success: function(returnhtml){       
          $("#result").html(returnhtml); 
          // put this result in the cache 
          ajaxCache[form_data] = returnhtml; 
          $("#loadingimg").hide();      
         }   
        });  
       },1000); 
      } 
     } 
    }); 
}); 

工作演示：http://jsfiddle.net/jfriend00/P2WRk/