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

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

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请求。页面应禁用已在运行的同一调用的重复调用

---

提前感谢。

当用户单击按钮时将其禁用，当您从ajax获得响应时将其设置为false。

在函数外部声明一个初始值为false的变量：

var pending = false;

当你提出请求时，你会：

if (pending == true) {return;}
pending = true;

如果您已经在运行，并且请求完成时，这会使其停止：

pending = false;

现在，即使没有按钮，请求也不会触发多次

作为旁注，您的数据不需要是字符串。您只需执行以下操作：

data: {stage: stage, stop: stop, nDays: nDays}

---

可以使用外部变量跟踪状态

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调用

function LinkClicked() {

    if($(window).data("ajaxRUnning")){
       return;
    }
    $(window).data("ajaxRUnning",true);
    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);
            $(window).data("ajaxRUnning",false);
        },
        error: function () {
            $("[id$='spinner']").hide();
            alert("An error occured posting to the server");
            $(window).data("ajaxRUnning",false);

        }
    });

}

---

（请注意，理想情况下，您希望将外部变量固定在闭包或名称空间中，而不是将其设置为全局变量）。

您只需选中使用此选项即可

var ajax_stat = false

function doing_ajax(){
if(ajax_stat) return;
ajax_stat = true;
var xmlRequest =  $.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");
        ajax_stat = false;
    }
});
}

---

使用下面的代码。它不会进行多个ajax调用

function LinkClicked() {

    if($(window).data("ajaxRUnning")){
       return;
    }
    $(window).data("ajaxRUnning",true);
    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);
            $(window).data("ajaxRUnning",false);
        },
        error: function () {
            $("[id$='spinner']").hide();
            alert("An error occured posting to the server");
            $(window).data("ajaxRUnning",false);

        }
    });

}

---

您可以在调用ajax时设置一个

标志

，并在回调中重置它添加一个限制，在请求运行时禁用事件，移除激活它的按钮，等等。您能否在呼叫开始时禁用按钮/链接，并且仅在成功/失败时启用？@DavidB呼叫来自网格视图单元格中的链接，如果可能，我不想禁用it@SkeetJon检查我的回答呼叫来自网格视图单元格中的链接，如果可能，我不想禁用它。在这种情况下，您可以通过javascript变量进行控制。单击按钮后，您可以删除处理程序，然后在成功后再次添加。或者使用事件委派绑定处理程序，然后在发出请求时使按钮与委派目标选择器不匹配。

$（window）。data（）

-为什么会这样？只需使用一个简单的变量。@Bergi check。。最好使用

窗口

而不是调用该方法的

对象

。因为可以有多个元素触发同一个调用。我知道它的作用。但是不要使用

窗口

或

对象

或任何东西，只使用一个简单的变量！如果我按照您的建议创建数据，服务器将不会接受它。[WebMethod][ScriptMethod（ResponseFormat=ResponseFormat.Json）]公共字符串GetGraphData（字符串阶段、字符串停止、整数日）{。。。