How to show only the last ajax request result

Question

Total up the amount of the ajax request and show the ajax response when it is the last ajax response.

In other words, how to use only the response of last sent ajax request.

var req=0;
function ajaxReq(){
    req++; /total up the amount of request/
    $.ajax({
        url: "result.php",
        type: 'GET',
        contentType: false,
        enctype: 'multipart/form-data',
        cache: false,
        processData: false,
        success: function(response) {
            if(req==1){ /show the response when this is the last request/
                $("#response-element").html(response);
            }
            req--; /Subtract when every success ajax response/
        }
    });
}

I using this on viewing messages detail if the user clicked few threads before the response show out it will show the previous thread detail before the current selected thread detail shown out

Any better solution would be nice for sharing

Answer 1

You should decrement as soon as you send request.

var req=""; // should be a number
function ajaxReq(){
    req++; /total up the amount of request/
    $.ajax({
        url: "result.php",
        type: 'GET',
        contentType: false,
        enctype: 'multipart/form-data',
        cache: false,
        processData: false,
        beforeSend: function() {
            if (req > 1) req -= 1;
        },
        success: function(response) {
            if(req==1){ /show the response when this is the last request/
                $("#response-element").html(response);
                req -= 1;
            }
        }
    });
}

Answer 2

You are more or less on the right lines. This is the only way you can avoid the callbacks of previous calls. You will have to associate an ID with each request and then check if the ID of the request is the last sent request.

var sentReqCount = 0;

setInterval(function() {
    sentReqCount++;
    ajaxReq(sentReqCount);
}, 100);

function ajaxReq(thisReqId) {
    $.ajax({
        url: "result.php",
        type: 'GET',
        contentType: false,
        enctype: 'multipart/form-data',
        cache: false,
        processData: false,
        success: function(response) {
            if (thisReqId === sentReqCount) {
                $("#response-element").html(response);
            }
        }
    });
}