3

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

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

在此处输入图像描述

提前致谢。

4

5 回答 5

4

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

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

（请注意，理想情况下，您希望将外部变量粘贴在闭包或命名空间中，而不是使其成为全局变量）。

于 2013-05-20T14:34:36.270 回答
2

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

于 2013-05-20T14:32:32.093 回答
1

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

var pending = false;

当您提出请求时，您会：

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

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

pending = false;

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

作为旁注，您的数据不需要是字符串。你可以这样做：

data: {stage: stage, stop: stop, nDays: nDays}
于 2013-05-20T14:34:15.143 回答
1

你可以检查一下使用这个

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;
    }
});
}
于 2013-05-20T14:35:53.697 回答
1

使用下面的代码。它不会进行多次 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);

        }
    });

}
于 2013-05-20T14:36:00.963 回答