ボタンのクリックで複数のキューに入れられたPOSTを防止する

Question

たとえば、ユーザーがボタンをクリックすると、サーバーはボディに追加されたdivを送信しますが、完了するまでPOSTをキューに入れないようにするロジックはありません。

これは、そのdivの1つだけが存在する可能性があるというロジックを無視し、キューに入れられたPOSTが完了するとすぐに倍数を追加するという問題につながります。

どうすればこの問題を防ぐことができますか？

事業部は、サーバから送信された：

'<div id="test_div"></div>' 

ボタンのイベント：

$('body').on('click', '#test_button', function(){ 
    $.post('get_test_div/',function(response){ 
     //The following if is ignored if there are uncompleted queued POSTs 
     if($('#test_div').length < 1){ 
      $('body').append(response); 
     } 
    }) 
}) 

Answer 1

1つの代替は、それがクリックされていますとき、ボタンを無効にすることです。あなたがする必要があるのあなたは再びそれを有効にすることができます。

$('body').on('click', '#test_button', function(){ 

    $('#test_button').prop('disabled', true); 

    $.post('get_test_div/',function(response){ 
     //The following if is ignored if there are uncompleted queued POSTs 
     if($('#test_div').length < 1){ 
      $('body').append(response); 
     } 

     // re-enables the button 
     $('#test_button').prop('disabled', false); 
    }) 
}) 

Answer 2

を代わりに使用できる "オン"、 "1" で。 ボタンを1回だけクリックすることができます。ここで

$("#foo").one("click", function(event) { 
    alert("The " + event.type + " event happened!"); 
}); 

は、ドキュメントへのリンクです：http://api.jquery.com/one/

Answer 3

をあなたのキュー内の項目は、（検索対象の項目がキューにSTILある）あなたのDOMにまだ追加されていないアイテムを探しているように見えます。これは基本的にデッドロックを作り出しています。 1つの可能性は、クライアント側キューです。

1. クライアント側キューを実装します。サーバーからの応答を受け取ったら、直ちにDOMのdiv/idを調べるのではなく、サーバーから取得したアイテムをクライアント側のキューに追加します。

2. クライアント側のキューを反復処理し、キュー内の各アイテムのDOMに対する比較を行う関数を用意します。一致するものが見つかった場合は、クライアント側のキューからその項目を削除し、現在行っているようにDOMに追加します。

3. この機能をタイマーに設定すると、1秒、3秒などごとに実行されます。このようにして、継続的な比較が行われます。