Abort all previous requests in jquery

Question

I have a search box in my application. In which I have to show results while user typing the word in search box. For this I need to abort all previous requests and show the result of last request in grid.

Because I am using grid, grid "beforeSend" event will override jquery beforeSend event. So I used below code,

<script type="text/javascript">
$(function () {
    $.xhrPool = [];
    grid.Adaptor.prototype.beforeSend = function (jqXHR) {
        $.xhrPool.push(jqXHR);
    }
    $.xhrPool.abortAll = function () {
        $(this).each(function (i, jqXHR) { 
            jqXHR.abort();  
            $.xhrPool.splice(i, 1);
        });
    }
    $.ajaxSetup({
        complete: function (jqXHR) {
            var i = $.xhrPool.indexOf(jqXHR); 
            if (i > -1) $.xhrPool.splice(i, 1); 
        }
    });
})

However, I can push the request in xhrPool, but I can't abort the previous requests.

Note $.xhrPool.abortAll = function () { this is not hitting when I place a breakpoint.

What I am missing here ?

You are adding a method to an array object. What makes you think JavaScript interpreter will call that method itself? — Ram, Mar 22 '16 at 07:25
http://stackoverflow.com/a/8841412/1982680 try this out and http://jsfiddle.net/s4pbn/148/ — Dipali Vasani, Mar 22 '16 at 07:26
Are you sure that `$(this)` in your `abortAll()` returns your `xhrPool`? — haldagan, Mar 22 '16 at 07:28
I would say why don't you setup a timeout to delay the request to be sent instead. — Jai, Mar 22 '16 at 07:36

score 1 · Answer 1 · answered Mar 22 '16 at 07:41

I have to show results while user typing the word in search box. For this I need to abort all previous requests and show the result of last request in grid.

Your code:

$.ajaxSetup({
    complete: function (jqXHR) {
        var i = $.xhrPool.indexOf(jqXHR); 
        if (i > -1) $.xhrPool.splice(i, 1); 
    }
});

Won't do anything as this complete callback fires only when the request has got the response as success or error. So, aborting here doesn't make sense.

I would suggest you to use a timed setTimeout() in conjunction with clearTimeout():

$(function() {
  var time;

  $('input').keydown(function(e){

    if(time){ 
      // before hitting the ajax 
      // clear the timeout if there is/are
      clearTimeout(time); 
    } 

    time = setTimeout(function(){
      // here put the ajax code.
    },600);

  });

})

This is working when I add setTimeOut function. I need to confirm that I cannot abort previous ajax requests in ajaxSetup ? — Shesha, Mar 22 '16 at 09:46
ok fine jai. I am using grid so, ajaxsetup beforeSend won't work for me. Thanks for the solution. :) :) — Shesha, Mar 22 '16 at 09:56

Abort all previous requests in jquery

1 Answers1