How to cancel an $.ajax request if a previous is running?

Question

I have this simple piece of code:

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

What I want to do is to cancel a previous $.ajax request, if any is running, in case the user types too fast. I need only the latest request to pass, not the whole sequence of them.

How can I do this?

use client side .abort() but most server language will continue to handle your ajax request because server doesn't know you have aborted it — A. Wolff, May 25 '13 at 15:25
Put a delay on the ajax request to only fire when the user stops typing for say, 2 seconds? — naththedeveloper, May 25 '13 at 15:25

score 25 · Accepted Answer · answered May 25 '13 at 15:26

25

Store the jqXHR object in a variable and abort it each time.

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

answered May 25 '13 at 15:26

Explosion Pills

188,624
52
326
405

4

+1, creating an object with an abort method to avoid errors is a nice touch. – adeneo May 25 '13 at 15:29
Simplest solution found in the universe. – tnchalise Sep 13 '17 at 01:52

score 7 · Answer 2 · answered May 25 '13 at 15:26

You'd need to store a reference to the AJAX request in progress, then call the abort() method on it;

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

... although note that cancelling an AJAX request doesn't always prevent the request from being completed on the server.

@RichardRodriguez: See http://api.jquery.com/deferred.always/. In our case, it clears the "ajax" variable whether the AJAX request fails or succeeds, so that we don't "abort()" requests that have already completed. — Matt, May 25 '13 at 15:28

How to cancel an $.ajax request if a previous is running?

2 Answers2

Linked