如何防止重复的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);
        }
    });

});

小提琴演示

从上面的演示中可以看到，例如，如果您键入test ， test1或test2或任何单词，只要它们的长度大于1，则它将进行AJAX调用。

我的问题是，有什么办法可以防止重复的AJAX调用？ 例如，如果我再次在文本框中输入test ，它将立即在div中显示test ，而无需再次调用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/