javascript - how can i stop all ajax request and take the latest one? -

i have button this:

<input type="button" id="getresult" value="getresult" /> 

by clicking on button 1 ajax call request active. if keeps clicking on button queue of ajax request hitting server , waiting response. want kill request , want take latest 1 request.

$('#getresult').click(function() {  var parameters = {data1:'value1',data2:'value2'};  $.post("getresult.php",parameters,function(msg){      console.log(msg); },'json');  }); 

i tried xhr.abort(); assigning request variable. whenever click button abort request. unable latest request. eg. if click on button 6 times 6 request generate want cancel prev 5 request , want proceed 6th one.

here fiddle: http://jsfiddle.net/s4pbn/308/

disable button , reable once request has completed:

$('#getresult').click(function () {     this.disabled = true;     var parameters = {         data1: 'value1',         data2: 'value2'     };      $.post("getresult.php", parameters, function (msg) {         console.log(msg);     }, 'json').always(function () {         this.disabled = false;     }.bind(this)); }); 

edit:

i cant disable button. there limitation.

really not sure why, try:

$('#getresult').click(function () {     if (this.pendingrequest) this.pendingrequest.abort();     var parameters = {         data1: 'value1',         data2: 'value2'     };      this.pendingrequest = $.post("getresult.php", parameters, function (msg) {         console.log(msg);         this.pendingrequest = null;     }, 'json'); }); 

but aware, that's stopping client browser listen previous request response, not server handle previous ones. first method better way imho.