중복 된 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

을 위의 데모에서 볼 수 있듯이을, 예를 들어 테스트, 테스트 1 또는 테스트 2을 입력하거나 길이가 1보다 길면 AJAX 호출을합니다.

제 질문은 저에게 AJAX 중복 호출을 방지 할 수있는 방법이 있습니까? 예를 들어 입력란에 테스트을 다시 입력하면 div30에 테스트가 표시되고 결과를 다시 가져 오기 위해 다른 AJAX를 호출하지 않습니다. 대단히 감사드립니다.

Answer 1

이전 결과를 캐시하고 ajax 호출을하기 전에 캐시에서 해당 결과가 이미 캐시에 있는지 확인하십시오.

자바 스크립트에서, 하나는 일반적으로 캐시 객체를 사용

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/