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

Question

I have a button like this:

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

by clicking on this button one ajax call request active. if i keeps clicking on this button then i get queue of ajax request which are hitting to server and waiting for response. but i want to kill all those request and want to take latest one request.

$('#getresult').click(function() {

var parameters = {data1:'value1',data2:'value2'};

$.post("getresult.php",parameters,function(msg){ 
    console.log(msg);
},'json');

});

I tried the xhr.abort(); by assigning the request to this variable. but whenever i click the button it abort all the request. i am unable to get the latest request. for an eg. if I click on the button 6 times then the 6 request will generate then i want to cancel the prev 5 request and want to proceed the 6th one.

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

why don't you disable the `button` once `clicked` and `enable` it on `ajax complete`? — Guruprasad J Rao, Sep 30 '15 at 11:27
http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery check it out — Gaurav Gupta, Sep 30 '15 at 11:28
@GauravGupta I have tried the same but its aborting all the request and not proceeding the latest one. — sumitjainjr, Sep 30 '15 at 11:32
@sumitjainjr Obviously, as its not tailor made for you. You can tweak it easily by managing the iteration over array. Iterate from 0 to arraylength-2 index, so last request wont be aborted. — Gaurav Gupta, Sep 30 '15 at 11:37

A. Wolff · Accepted Answer · 2015-09-30T11:35:43.823

Disable the button and reable it 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 the button. there is some limitation.

Really not sure why, but then 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 be aware, that's just stopping client browser to listen for previous request response, not server to handle any previous ones. The first method is better way imho.

actually the thing is that I made a button for just to make you understand while in the real scenario i am using a price range slider (if you keeps changing the slider then everytime request is going with new price range) , that was difficult to implement over here. — sumitjainjr, Sep 30 '15 at 11:46

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

1 Answers1