如何防止重复的 AJAX 调用？答案

【问题标题】：How to prevent duplicated AJAX call?如何防止重复的 AJAX 调用？
【发布时间】：2014-06-23 14:26:55
【问题描述】：

我目前正在构建一个简单的 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 调用？例如，如果我再次在文本框中键入 test，它会立即在 div 中显示 test，而无需再次进行 AJAX 调用以再次获取结果。非常感谢您。

【问题讨论】：

标签： javascript jquery ajax

【解决方案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/

【讨论】：