javascript - 执行当前的 ajax 调用并中止所有先前的调用

Question

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

我尝试使用abort()进行ajax调用。当我中止之前的 ajax 调用时，该调用并未进行，但仍然等待 10 次调用才执行最后一个调用，这使得用户体验非常糟糕。

那么有没有一种方法可以只执行当前的 ajax 调用，而不会对之前的调用产生任何延迟？

我的代码的一部分:

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

Answer 1

OP，这有两个部分。第一个是你的中止，看起来你已经中止了。

第二个是在这个过程中引入宽恕。您希望在用户停止打字时触发，而不是在每次按键时触发。

您需要同时使用 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);

      });
    });

这样做的目的是不断设置一个超时，以便每次按键按下时触发，但每次按键按下时都会取消该超时。这将起到阻止服务调用触发的作用，直到用户停止键入或暂停太长时间。最终结果是您最终会中止一小部分调用。