Question

I was making a button that submits an AJAX request to update shopping cart when clicked.

The problem is, if the user clicks a multiple times in quick succession, the script won’t be able to update it (eg. clicked 10 times in 2 seconds, only added the item twice).

I wonder if there is anyway to queue up the ajax requests?

Answer 1

You can implement a simple queue the following way:

var lock = false, queue = [];
$('#submitButton').click(function (event) {
    var data = ExtractRequestData(); // This function is what you do to get the data you want to send
    PerformRequest(data);
});

function PerformRequest(data) {
    if (!lock) {
        lock = true;
        $.ajax(// perform ajax request
            complete: function (data) {
                // Complete handler
                lock = false;
                if (queue.length > 0) {
                    PerformRequest(queue.shift());
                }
            }
    } else {
        qeueu.push(data);
    }
}

This guarantees you to execute the requests in order and one after another after each request has been completed.