当用户多次单击按钮时，将AJAX请求的数量限制为一个

Question

I have a portal having n tabs and whenever the visitor clicks a particular tab, an AJAX request is created. A PHP script at the back end inserts a record into a table which tracks the time of click and the name of the tab clicked.

When the visitor clicks the same tab multiple times, continuously, all the AJAX requests are succeeding. Say I click a tab "Automation" 5 times, then 5 AJAX requests are succeeding and 5 records are getting inserted. I need to limit the request to only one, if the visitor is repeatedly and quickly clicking the tab for an interval of 3s. How to go about this?

Here's my jQuery AJAX code :

$.ajax({            
    url     :   "pushTelemetry.php",
    cache   :   false,
    data    :   ({
                    DshBrdName  : strFullDashBoardName,
                    DshBrdID    : currentDashboard, 
                    r           : Math.random()
                }),
    success :   function(data, textStatus, jQxhr){
                    //alert(textStatus); 
                },
    error   :   function(jqXHR, textStatus, errorThrown){
                    //alert(textStatus);
                    alert(errorThrown);
                },
    type    :   "POST"
});

Answer 1

The idea is to indicate that an AJAX call should only be made if there's not another one already being made. Here I indicate it using an extra class on the button which triggers the ajax call.

Do something like:

$(selector).on("click",function () {
    if ($(this).is(".pendingResult") { return; }
    $(this).addClass("pendingResult");
    var finally = $.proxy(function () { $(this).removeClass("pendingResult"); }, this);         

    $.ajax({

        url     :   "pushTelemetry.php",
        cache   :   false,
        data    :   ({
                        DshBrdName  : strFullDashBoardName,
                        DshBrdID    : currentDashboard, 
                        r           : Math.random()
                    }),
        success :   function(data, textStatus, jQxhr){
                        //alert(textStatus); 
                    },
        error   :   function(jqXHR, textStatus, errorThrown){
                        //alert(textStatus);
                        alert(errorThrown);
                    },
        type    :   "POST",
        complete :  finally 
    });
});

Some further detail:

JQuery AJAX calls can terminate in either success or error, however whenever either of these happens, the "complete" function is called if specified, this acts like the finally code in a try-catch-finally block.

However the scope of this "complete" function is the window and not the element which triggered the AJAX call, therefore if you need to somehow pass the clicked element to the "complete" function. Fortunately JQuery has a built-in way to do this using the proxy method. This method accepts a callback and a scope/element and ensures that the "this" object within the callback refers to the specified scoped element. This is similar to the built-in JavaScript method bind, the reason that I used proxy here is that bind is newer and not supported in IE 8 which some people may still be trying to support (for some reason).