Question

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

当访问者多次连续点击同一个标签时，所有AJAX请求都会成功。假设我单击一个选项卡＆＃34; Automation＆＃34; 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调用可以在成功或错误中终止，但无论何时发生这两种情况，都会调用“complete”函数（如果指定），这就像try-catch-finally块中的finally代码一样。

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

Answer 2

您可以禁用该选项卡上的点击，直到您收到服务器的回复。

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

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

2 个答案: