如何取消正在运行的 $.ajax 请求以便执行先前的请求？

Question

我有这段简单的代码：

$(document).on("input", "#addFoodSearch", function(event){
   var search = $(this).val();
   $.ajax({ url: "/ajax/search-food.php", type: 'GET', data: { 'search' : search }, dataType: 'json' }).done(
      function(data){
         if (data[0] == 'success'){
            $('#add-food-area').html(data[1]);
            $('#add-food-area').fadeIn();
         }
      }
   );
});

我想要做的是，如果用户输入速度过快，在任何正在运行的$.ajax请求中取消上一个请求。我只需要最新的请求通过，而不是它们的整个序列。

我该如何做到这一点？

- Frantisek

---

使用客户端的.abort()方法，但大多数服务器语言仍将继续处理您的ajax请求，因为服务器不知道您已中止它。 - A. Wolff

在ajax请求中添加延迟，只有当用户停止输入2秒钟时才触发？ - naththedeveloper

Answer 1

将jqXHR对象存储在变量中，并每次取消它。

var jqxhr = {abort: function () {}};
$(document).on("input", "#addFoodSearch", function(event){
    var search = $(this).val();
    jqxhr.abort();
    jqxhr = $.ajax(...

- Explosion Pills

---

+1，创建一个具有中止方法的对象以避免错误是一个不错的设计。 - adeneo

宇宙中找到的最简单解决方案。 - tnchalise

Answer 2

您需要将正在进行的AJAX请求存储在一个引用中，然后调用abort()方法；

var ajax;

$(document).on("input", "#addFoodSearch", function(event){
   var search = $(this).val();

   if (ajax) {
       ajax.abort();
   }

   ajax = $.ajax({ url: "/ajax/search-food.php", type: 'GET', data: { 'search' : search }, dataType: 'json' }).done(
      function(data){
         if (data[0] == 'success'){
            $('#add-food-area').html(data[1]);
            $('#add-food-area').fadeIn();
         }
      }
   ).always(function () {
       ajax = undefined;
   });
});

请注意，取消 AJAX 请求并不总是能够阻止服务器完成该请求。

- Matt

---

.always 部分是做什么用的？ - Frantisek

@RichardRodriguez：请参考http://api.jquery.com/deferred.always/。在我们的情况下，它会清除“ajax”变量，无论AJAX请求成功或失败，这样我们就不会“abort()”已经完成的请求。 - Matt