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

如果以前的请求正在运行，如何取消$ .ajax请求？

2 个答案: