EibergDK EibergDK - 1 month ago 7
Ajax Question

Multiple clicks prevents AJAX requests

I have page with multiple buttons, which sometimes can be clicked really fast - however it seems like Chrome can hold up with the speed?

$(document).ready(function() {
$('.favorite-button').unbind('click').click(function() {
addLine($(this).data('line-id'));
});
});


addLine() function:

function addLine(lineID) {
$.ajax({
type: 'POST',
url: 'add-line.php',
data: { lineID : lineID },
success: function(server_response) {
$('#counter-lines').html(server_response);
}
});
}


What can I do so that Chrome will register and complete every ajax call?
It does not seem to be a limit in Chrome - even two fast clicks will result in a missing ajax call...

Answer

It seems that you just don't get the responses by order.

I see that you tell the server what ID to give the line. So why don't you keep the sent lineID in a global variable, and when you get the response you can see if it's a response to the most recent request.

like:

var latest_line = null;
    function addLine(lineID) {
            latest_line = lineID;
            $.ajax({
                type: 'POST',
                url: 'add-line.php',
                data: { lineID : lineID },
                success: function(server_response)  {
                    // Is this the most recent request?
                    if (latest_line == lineID)
                    {
                        $('#counter-lines').html(server_response);
                    }
                }
            });
        }
Comments