ユーザーがボタンを何回かクリックしたときにAJAX要求の数を1に制限する

Question

ポータルにn個のタブがあり、訪問者が特定のタブをクリックするたびにAJAX要求が作成されます。バックエンドのPHPスクリプトは、クリック時間とクリックされたタブの名前を記録するテーブルにレコードを挿入します。

訪問者が同じタブを複数回クリックすると、継続的にすべてのAJAXリクエストが成功します。 「Automation」タブを5回クリックすると、5つのAJAXリクエストが成功し、5つのレコードが挿入されているとします。訪問者が3秒間隔でタブを繰り返してすばやくクリックしている場合は、リクエストを1つに制限する必要があります。 これについてはどうすればいいですか？

はここに私のjQueryのAJAXコードです：

$.ajax({    
    url  : "pushTelemetry.php", 
    cache : false, 
    data : ({ 
        DshBrdName : strFullDashBoardName, 
        DshBrdID : currentDashboard, 
        r   : Math.random() 
       }), 
    success : function(data, textStatus, jQxhr){ 
        //alert(textStatus); 
       }, 
    error : function(jqXHR, textStatus, errorThrown){ 
        //alert(textStatus); 
        alert(errorThrown); 
       }, 
    type : "POST" 
}); 

Answer 1

アイデアがすでに行われている別の1がないかどうAJAX呼び出しのみがなされるべきであることを示すためです。ここでは、ajax呼び出しをトリガーするボタン上の余分なクラスを使用して示します。

$(selector).on("click",function() { 
    if ($(this).is(".pendingResult") { return; } 
    $(this).addClass("pendingResult"); 
    var finally = $.proxy(function() { $(this).removeClass("pendingResult"); }, this);   

    $.ajax({ 

     url  : "pushTelemetry.php", 
     cache : false, 
     data : ({ 
         DshBrdName : strFullDashBoardName, 
         DshBrdID : currentDashboard, 
         r   : Math.random() 
        }), 
     success : function(data, textStatus, jQxhr){ 
         //alert(textStatus); 
        }, 
     error : function(jqXHR, textStatus, errorThrown){ 
         //alert(textStatus); 
         alert(errorThrown); 
        }, 
     type : "POST", 
     complete : finally 
    }); 
}); 

いくつかのさらに詳細：

は次のように行います

jQueryのAJAXは、これらのいずれかが発生したときに指定した場合ただし、「完全な」関数が呼び出され、成功またはエラーのいずれかで終了することができます呼び出しますこれはtry-catch-finallyブロックにfinallyコードのように動作します。

しかし、この「完全」機能の範囲はウィンドウであり、AJAX呼び出しをトリガーした要素ではないため、何らかの形でクリックされた要素を「完了」機能に渡す必要がある場合に使用します。幸い、JQueryには、proxyメソッドを使用してこれを行う組み込みの方法があります。このメソッドは、コールバックとスコープ/要素を受け取り、コールバック内の "this"オブジェクトが指定されたスコープ付き要素を参照するようにします。これは組み込みのJavaScriptメソッドbindに似ています。私がここでプロキシを使用した理由は、バインドがより新しく、何らかの理由でサポートしようとしているかもしれないIE 8でサポートされていないということです。

Answer 2

サーバーからの応答が得られるまで、タブのクリックを無効にすることができます。

var clickAllowed = true; 
$('#tab').on('click', function() { 
    if(clickAllowed) { 
     clickAllowed = false; 
     $.ajax({    
      url  : "pushTelemetry.php", 
      cache : false, 
      data : ({ 
          DshBrdName : strFullDashBoardName, 
          DshBrdID : currentDashboard, 
          r   : Math.random() 
         }), 
      success : function(data, textStatus, jQxhr){ 
          //alert(textStatus); 
          clickAllowed = true; 
         }, 
      error : function(jqXHR, textStatus, errorThrown){ 
          //alert(textStatus); 
          alert(errorThrown); 
          clickAllowed = true; 
         }, 
      type : "POST" 
     }); 
    } 
});