javascript - 如何阻止用户重复单击 jQuery AJAX 调用？

Question

我有一个包含以下脚本的网页

Javascript

function LinkClicked() {

    var stage = this.id;
    var stop = $('#ContentPlaceHolderMenu_txtDate').val();
    var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val();

    $("[id$='spinner']").show();


    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: "...",
        data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
        success: function (data) {
            $("[id$='spinner']").hide();
            PlotData(data.d);

        },
        error: function () {
            $("[id$='spinner']").hide();
            alert("An error occured posting to the server");
        }
    });

}

如何阻止用户在查询运行时重复点击？该调用来自网格中的一个单元格，无法轻易禁用。理想情况下，我想要一种在不禁用 DOM 上的链接的情况下在脚本中执行此操作的方法。

这里我点击了五次，可以看到发送了五个 AJAX 请求。该页面应该禁止在它已经运行时重复调用相同的调用。

提前致谢。

Answer 1

你可以有一个外部变量来跟踪状态

var linkEnabled = true;
function LinkClicked() {
    if(!linkEnabled){
    return;
    }
    linkEnabled = false;
    var stage = this.id;
    var stop = $('#ContentPlaceHolderMenu_txtDate').val();
    var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val();

    $("[id$='spinner']").show();


    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: "...",
        data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
        success: function (data) {
            $("[id$='spinner']").hide();
            PlotData(data.d);
            linkEnabled =true;

        },
        error: function () {
            $("[id$='spinner']").hide();
            alert("An error occured posting to the server");
            linkEnabled = true;
        }
    });

}

这还有一个好处，您可以根据需要选择启用此功能的其他效果，并且只防止重复的 ajax 调用。

(请注意，理想情况下，您希望将外部变量放在闭包或命名空间中，而不是将其设为全局变量)。