如何在前一个请求运行时取消 $.ajax 请求？

13 浏览
0 Comments

如何在前一个请求运行时取消 $.ajax 请求？

我有这段简单的代码：\n

$(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();
         }
      }
   );
});

\n我想要做的是，如果用户输入太快，取消之前的$.ajax请求（如果有的话）。我只需要最新的请求通过，而不是整个序列。\n我该怎么做？

0

2 答案

0 Comments

在上述代码中，我们首先需要存储正在进行的AJAX请求的引用，然后调用`abort()`方法来取消它。代码中使用了一个变量`ajax`来存储当前进行的AJAX请求。当用户输入发生变化时，会触发`input`事件，代码会检查是否有正在进行的AJAX请求，如果有，则调用`abort()`方法来取消它。然后，代码会发送一个新的AJAX请求。

需要注意的是，取消一个AJAX请求并不总是能够阻止请求在服务器端完成。

代码中的`.always()`部分是用来做什么的呢？它可以参考api.jquery.com/deferred.always文档。在我们的例子中，它会在AJAX请求失败或成功时清除“ajax”变量，这样我们就不会“abort()”已经完成的请求了。

0
0 Comments

在进行Ajax请求时，有时候会遇到需要取消之前正在运行的请求的情况。为了解决这个问题，可以将jqXHR对象存储在一个变量中，并在需要取消请求时调用其abort方法。

以下是一个示例代码：

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

在上述代码中，我们创建了一个名为jqxhr的对象，并给它添加了一个名为abort的方法。当输入框的值发生变化时，我们首先调用jqxhr.abort()来取消之前的请求，然后再发起新的请求。

这种方法非常简单且高效，可以确保每次只有一个请求在运行。如果之前的请求还没有完成，它会被取消并且不会返回任何结果。因此，这是一个解决这个问题的最简单的方法。

0