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

Question

我有一个有 n 个选项卡的门户，每当访问者单击特定选项卡时，就会创建一个 AJAX 请求。后端的 PHP 脚本将一条记录插入到一​​个表中，该记录跟踪点击时间和所点击的选项卡的名称。

当访问者连续多次单击同一个选项卡时，所有 AJAX 请求都会成功。假设我单击“自动化”选项卡 5 次，然后 5 个 AJAX 请求成功并插入了 5 条记录。如果访问者以 3 秒的间隔重复快速单击选项卡，我需要将请求限制为只有一个。如何解决这个问题？

这是我的 jQuery AJAX 代码:

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

这个想法是为了表明只有在没有另一个调用时才应该进行 AJAX 调用。在这里，我在触发 ajax 调用的按钮上使用一个额外的类来指示它。

做类似的事情:

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

一些进一步的细节:

JQuery AJAX 调用可以在成功或错误中终止，但是无论何时发生，如果指定，就会调用“完成”函数，这就像 try-catch- 中的 finally 代码一样最后阻止。

然而，这个“完整”函数的范围是窗口而不是触发 AJAX 调用的元素，因此如果您需要以某种方式将点击的元素传递给“完整”函数。幸运的是，JQuery 有一种内置的方法可以使用 proxy 方法来执行此操作。此方法接受回调和作用域/元素，并确保回调中的“this”对象引用指定作用域的元素。这类似于内置的 JavaScript 方法 bind，我在这里使用代理的原因是 bind 较新并且在 IE 8 中不受支持，有些人可能仍在尝试支持(出于某种原因).