在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 ?

Answer 1

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

  });

})