如何防止重复的AJAX调用？

我目前正在构建一个简单的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/