3

次のスクリプトを含むWebページがあります

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 上のリンクを無効にせずにスクリプトでそれを行う方法が必要です。

ここで 5 回クリックすると、5 つの 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 からの応答を受け取ったときに無効に設定して 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 に答える