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

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

当访问者连续多次单击同一选项卡时，所有AJAX请求都会成功。假设我单击一个选项卡“Automation”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"
});

---

这样做的目的是指出，只有在没有另一个AJAX调用的情况下，才应该进行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调用可以在成功或错误中终止，但是无论何时发生这两种情况，都会调用“complete”函数（如果指定），这就像try-catch-finally块中的

finally

代码一样

---

但是，这个“complete”函数的作用域是窗口，而不是触发AJAX调用的元素，因此如果您需要以某种方式将单击的元素传递给“complete”函数。幸运的是，JQuery有一种内置的方法可以使用

proxy

方法来实现这一点。此方法接受回调和作用域/元素，并确保回调中的“This”对象引用指定的作用域元素。这类似于内置的JavaScript方法

bind

，我在这里使用proxy的原因是bind较新，在ie8中不受支持，有些人可能仍然试图支持它（出于某种原因）

这样做的目的是指出，只有在没有另一个AJAX调用的情况下，才应该进行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调用可以在成功或错误中终止，但是无论何时发生这两种情况，都会调用“complete”函数（如果指定），这就像try-catch-finally块中的

finally

代码一样

---

但是，这个“complete”函数的作用域是窗口，而不是触发AJAX调用的元素，因此如果您需要以某种方式将单击的元素传递给“complete”函数。幸运的是，JQuery有一种内置的方法可以使用

proxy

方法来实现这一点。此方法接受回调和作用域/元素，并确保回调中的“This”对象引用指定的作用域元素。这类似于内置的JavaScript方法

bind

，我在这里使用proxy的原因是bind较新，在ie8中不受支持，有些人可能仍然试图支持它（出于某种原因）

您可以禁用该选项卡上的单击，直到收到服务器的响应

var clickAllowed = true;
$('#tab').on('click', function() {
    if(clickAllowed) {
        clickAllowed = false;
        $.ajax({            
            url     :   "pushTelemetry.php",
            cache   :   false,
            data    :   ({
                            DshBrdName  : strFullDashBoardName,
                            DshBrdID    : currentDashboard, 
                            r           : Math.random()
                        }),
            success :   function(data, textStatus, jQxhr){
                            //alert(textStatus);
                            clickAllowed = true;
                        },
            error   :   function(jqXHR, textStatus, errorThrown){
                            //alert(textStatus);
                            alert(errorThrown);
                            clickAllowed = true;
                        },
            type    :   "POST"
        });
    }
});

---

您可以禁用该选项卡上的单击，直到收到服务器的响应

var clickAllowed = true;
$('#tab').on('click', function() {
    if(clickAllowed) {
        clickAllowed = false;
        $.ajax({            
            url     :   "pushTelemetry.php",
            cache   :   false,
            data    :   ({
                            DshBrdName  : strFullDashBoardName,
                            DshBrdID    : currentDashboard, 
                            r           : Math.random()
                        }),
            success :   function(data, textStatus, jQxhr){
                            //alert(textStatus);
                            clickAllowed = true;
                        },
            error   :   function(jqXHR, textStatus, errorThrown){
                            //alert(textStatus);
                            alert(errorThrown);
                            clickAllowed = true;
                        },
            type    :   "POST"
        });
    }
});

---

禁用该按钮，直到您从服务器返回成功或错误。我无法执行此操作，因为该按钮是面板的选项卡！禁用按钮会使面板看起来很尴尬…检查单击的选项卡是否已经是活动选项卡。如果是，请不要发送遥测。禁用该按钮，直到从服务器返回成功或错误。我无法执行此操作，因为该按钮是面板的选项卡！禁用按钮会使面板看起来很尴尬…检查单击的选项卡是否已经是活动选项卡。如果是，请不要发送遥测。谢谢您的回复。你能解释一下你的密码吗？这对每个人都有帮助。谢谢你的回复。你能解释一下你的密码吗？这对每个人都有帮助。