-1

次のシナリオがあります。

$('button').on('click',function(){

    // Run AJAX commonds (May take some time);

});

そのため、ユーザーがボタンを数回クリックすると、ajaxリクエストを大量に実行している可能性があります。

これを解決する論理的な方法は、使用することです

var finished = true;
$('button').on('click',function(){
    if(finished == true){
        finished = false;
        ....
        finished = true;
    }

しかし、すべての関数にグローバル変数を追加するのは奇妙に思えますか? どうすればこれを修正できますか? 私は調べまし.off()たが、これはイベントを完全に削除します。one()一度実行するだけです。複数回実行したくありません。おそらく、この機能を処理するための簡単なプラグインを作成します。その繰り返し。

4

4 に答える 4

0

メソッドを学ぶ簡単な.on()方法.off(): http://jsbin.com/oguwux/1/edit

HTML:

<button id="btn">AJAX REQUEST</button>

jQuery:

function ajaxCall(){

  $(this).off('click');
  $(this).text('Processing...'); // test only

  setTimeout(function(){  // (example.) do your AJAX call instead
    // ON SUCCESS :
    $('#btn').text('AJAX REQUEST');
    $('#btn').on('click', ajaxCall);
  },2000);

}

$('#btn').on('click', ajaxCall);
于 2013-05-05T19:00:56.360 に答える
0

このようなものはどうですか: (未テスト):

var InProgress = Array();
function OneAtATime($jQueryAjax) {
    var Id = arguments.callee.toString().match(/function\s+([^\s\(]+)/)
    InProgress.push(Id)

    for(var i=0; i<32; i++)
        result += Math.floor(Math.random()*16).toString(16).toUpperCase();
        return result
    }

    CallBacks = {
            success: function(x,y,z){$jQueryAjax.success(x,y,z);Remove(Id);,
            error: function(x,y,z){$jQueryAjax.error(x,y,z);Remove(Id);,
            fail: function(x,y,z){$jQueryAjax.fail(x,y,z);Remove(Id);
        }
}

function Remove(Id) {
    InProgress.splice(InProgress.indexOf(Id),1);
}

サンプル使用法:

OneAtATime({
    /*  Usual jQuery.ajax properties  */
    url: '/Callback';
    success: function(data, status, xhhr) {
        alert('success');
    }

});

別の回答のコメントで述べたように、Javascript はシングル スレッドであるため、競合状態になる可能性はありません。

于 2013-05-05T19:19:38.597 に答える
0

オプションは、リクエストがアクティブなときにボタンを無効にすることです。

$('button').click(function() {
    //or in the ajax beforeSend function
    $(this).prop('disabled', true);
    $.ajax({
        ...
        //or directly after the user clicked the button
        beforeSend: function() {
            $('button').prop('disabled', true);
        },
        ...
        //complete or success callback
        complete: function() {
            $('button').prop('disabled', false);
        }
    });
});

ただし、この方法では、無効にしてクリックできないボタンを定義する必要があります。すべてのボタンを無効にしたい場合を除きます。working example (jsfiddle)これをテストするために を作成しました。(AJAX が完了してから 1 秒の遅延があるため、ボタンが無効になっていることがわかります)

別のオプションとしてTimeoutを使用することもできるため、ユーザーがボタンを繰り返し押した場合、AJAX 呼び出しは起動しません。AJAX 呼び出しがタイムアウトよりも長くかかる場合、問題は依然として存在します。

var timer;    
$('button').on('click', function() {
    clearTimeout(timer);
    timer = setTimeout( function() {
        // Run AJAX commonds (May take some time);
    }, 500);

});
于 2013-05-05T18:57:59.433 に答える
0

要素にデータを追加するか、クラスを追加して、まだ処理中であることを示すことができます。操作が完了したら、そのデータ/クラス名を削除します。

$('button').on('click',function(){

  var self = $(this);
  var processing = self.data('processing');

  if(!processing){ //if not processing

    self.data('processing',true); //flag as processing

    //do stuff
    $.ajax({...}).done(function(responseData){

      //when done, unflag
      self.data('processing',false);
    });
  }
});
于 2013-05-05T18:51:20.090 に答える