javascript - How to stop all active or pending ajax requests? -

in rails app, using jquery slider. in stop event of slider, there ajax request. if user continuously sliding slider there many pending ajax requests , system hang. have used:

1:

function slide_stop(event, ui){     $.xhrpool = [];     $.xhrpool.abortall = function() {        $(this).each(function(idx, jqxhr) {           jqxhr.abort();        });        $.xhrpool.length = 0     };      $.ajaxsetup({       beforesend: function(jqxhr) {           $.xhrpool.push(jqxhr);       },       complete: function(jqxhr) {          var index = $.xhrpool.indexof(jqxhr);          if (index > -1) {             $.xhrpool.splice(index, 1);          }       }    });    $.xhrpool.abortall();    $('span#imgloader').html('<img src="/assets/ajax-loader.gif">');    $.ajax({      type: 'get',      datatype: 'json',      url: 'some_url',      data: { is_ajax: true }    }).done(function(response){            $('span#imgloader').empty();    });  }   initialize slider,      $elt.slider({         min:0,         max:100,         value:50,         slide: slide_range,         stop: slide_stop     }).each(function(){      add_range_label($range_elt);     }); 

all ajax requests stopped/in not modified state. last request takes long time complete. no result again same hanging state.

2:

var request = $.ajax( {     type: 'post',     url: 'someurl',     success: function(result){} }); 

then,

request.abort(); 

not working. many requests still in pending state. don't know wrong it.

i tried using 'jquery-throttle-debounce'. included file 'jquery.ba-throttle-debounce.min.js' applied jquery.debounce stop event slider.

$("#slider").on( "slidestop", $.debounce( 240, slide_stop ) ); 

i tried reducing time delay. no expected result. same case above.

you can use plugin such http://archive.plugins.jquery.com/project/ajaxmanager.

also, javis mentioned best off incorporate delay before sending response don't needlessly overload server requests. instead of using time differences or arrays keep reference last ajax request created. abort request each time new 1 made.

// putting these here example, want associate them each instance of slider control.  var timeout, last_request;   function slide_stop(event, ui){     $('span#imgloader').html('<img src="/assets/ajax-loader.gif">');    // clear timeout previous request won't sent    cleartimeout(timeout)     // set request sent in .5 seconds    timeout = settimeout(send_request, 500);   }  function send_request(){    // abort last request if there 1    if(last_request){      last_request.abort();    }    last_request = $.ajax({      type: 'get',      datatype: 'json',      url: 'some_url',      data: { is_ajax: true }    }).done(function(response){            $('span#imgloader').empty();     // set last request null dont abort completed request      //(this might not necessary)     last_request = null;     }); }