如何防止重复的AJAX通话? [英] How to prevent duplicated AJAX call?

问题描述

我目前正在构建一个简单的AJAX调用应用程序，该应用程序将在其中输入一些文本后显示文本框的结果:

I'm currently building a simple AJAX call application which will show the result of a textbox after typing some texts inside it:

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调用.

As you can see from the demo above, for instance if you type test,test1 or test2 or any word as long as their length is longer than one then it'll make an AJAX call.

我的问题是，有什么办法可以防止重复的AJAX调用?例如，如果我再次在文本框中键入 test ，它将立即在div中显示 test ，而无需再次调用AJAX再次获取结果.提前非常感谢您.

My question is that is there any way that allow me to prevent duplicate AJAX call? For example if I type test in the textbox again, it'll immediately show test in the div without making another AJAX call to fetch the result again. Thank you very much in advance.

推荐答案

您只需要缓存先前的结果，并且在进行ajax调用之前，请检查缓存以查看缓存中是否已经有该结果.

You just need to cache previous results and, before making the ajax call, check the cache to see if you already have that result in the cache.

在Javascript中，通常将一个对象用于缓存:

In Javascript, one usually uses an object for a cache:

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/

这篇关于如何防止重复的AJAX通话?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！