jquery - 如果前一个正在运行，如何取消 $.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 请求，如果有的话正在运行，以防用户输入太快。我只需要通过最新的请求，而不是它们的整个序列。

我怎样才能做到这一点？

Answer 1

将 jqXHR 对象存储在一个变量中并每次中止它。

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

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 请求并不总是会阻止请求在服务器上完成。