执行当前的ajax调用并中止所有以前的调用

Question

我正在尝试建立一个自动完成的用户界面。有一个输入，其keyup函数对服务器执行ajax调用，以获取最相关的数据。但是，如果用户键入一个单词，请说10个字符长，因此对每个keyup进行一个ajax调用，并且我的对话框刷新10次。

我尝试过在ajax调用中使用abort()。当我对以前的ajax调用进行中止时，调用不会执行，但在执行最后一个调用之前，它仍然等待10个调用，这使用户体验非常糟糕。

那么，是否有一种方法可以不延迟地执行当前的ajax调用呢？

我的代码之一是：

var request_autocomplete=jQuery.ajax({});
$('.review_autocomplete').keyup(function() {
    request_autocomplete.abort();
    request_autocomplete=jQuery.ajax({
        // DO something
    });
});

Answer 1

这有两部分。第一个是你的流产，似乎你已经放弃了。

二是在过程中引入宽恕。您希望在用户停止键入时启动，而不是在每个键按下。

您需要同时使用keyUp和keyDown。在keyUp上，设置一个超时以触发提交。给它大约700毫秒。在KeyDown上，清除超时。

    var request_autocomplete=jQuery.ajax({});
    var forgiveness;

    // first your AJAX routine as a function
    var myServiceCall = function() {
       request_autocomplete.abort();
       request_autocomplete=jQuery.ajax({
            // DO something
    }

    // keyup 
    $('.review_autocomplete').keyup(function() {
        forgiveness = window.setTimeout(myServiceCall, 700);

      });
    });

    // key down
    $('.review_autocomplete').keydown(function() {
        window.clearTimeout(forgiveness);

      });
    });

这样做的目的是不断设置一个超时，以触发每次键打开，但每次键是按下，它将取消该超时。这将防止您的服务调用触发，直到用户停止键入或暂停太长时间。最终的结果是，你最终会中止一个更小的百分比你的电话。

Answer 2

您可以实现您在问题中所问的方式，例如防止以下3次调用：

var calls = 0;
$('.review_autocomplete').keyup(function() {
    if (calls >3) {
        request_autocomplete.abort();
        request_autocomplete=jQuery.ajax({
            // DO something
        });
        calls = 0;
    }
    calls++;
});

但是这种方式不推荐，因为当用户想要键入sample时，用户键入samp时，ajax调用就会启动。当用户键入l和e时，什么都不会发生！

如果您使用的是jquery Autocomplete，则可以使用

minLenght，这样您就可以检查文本框的当前lenght，当用户输入至少3个字符时，您必须调用ajax请求。

delay (在上次击键和ajax调用之间)。通常2到300毫秒就可以了)

并使用AjaxQueue

在对这个问题进行快速搜索之后，我发现了这个链接，它展示了另一种通过使用缓存防止多个ajax调用自动完成的方法。

Answer 3

您可以使用用setTimeout()和clearTimeout()重置的setTimeout()变量。

var globalTimeout;
$('.review_autocomplete').keydown(function(){
  if(globalTimeout)clearTimeout(globalTimeout);
}).keyup(function(){
  globalTimeout = setTimeoout(function(){
    $.ajax({/* you know the drill */});
  }, 10);
});

这样，每当客户端推送keydown时，超时就会被清除，但是一旦客户端释放键onkeyup，就会再次设置超时，因此只有在没有键操作的情况下，在本例中的10毫秒之后才会调用$.ajax()。我承认，这不会停止已经发出的$.ajax()调用，但是这可能并不重要，因为它们发生得非常快，并且因为这个示例阻止了客户端不断输入的未来$.ajax()调用。