Multiple clicks prevents AJAX requests

Question

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...

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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);
                    }
                }
            });
        }

Multiple clicks prevents AJAX requests

Sign up