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

enter image description here

提前致谢。

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

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

Answer 2

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

Answer 3

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

var pending = false;

当你提出请求时，你会这样做：

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

如果你已经在运行，并且在请求完成时，它会停止：

pending = false;

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

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

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

Answer 4

您可以查看使用此

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

Answer 5

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

        }
    });

}

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

5 个答案: