ループがなく、結果が追加されていない間、私は内に複数のポストを送信しようとしている

Question

javascriptの問題は、出力が

<script type="text/javascript"> 
function action() { 
    var initval = 1; 
    var endval = 5; 
    do { 
    var action_string = 'txtuser=someone'; 

    $.ajax({ 
        type: "POST", 
        url: "http://localhost/js.php", 
        data: action_string, 
        success: function(result){ 
         $('div#append_result').append(initval + ',<br/>'); 
        } 
       }); 
    initval++; 
    } while (initval <= endval); 
    } 
</script> 

ある

んが： 5、 5、 5、 5、 5、

と私は出力する必要があります 1、 2、 3、 4、 5、

Answer 1

AJAXの非同期性のため、結果のAJAX要求に対して成功関数が実行されるまでには、ループは完了し、initvalは5に設定されます。各要求の開始時にinitvalの状態を取得する必要がありますキャプチャした状態をsuccess()メソッドで使用します。

function action() { 
    var initval = 1; 
    var endval = 5; 
    do { 
     var action_string = 'txtuser=someone'; 

     (function(captured_initval){ 
      $.ajax({ 
       type: "POST", 
       url: "http://localhost/js.php", 
       data: action_string, 
       success: function(result){ 
        $('div#append_result').append(captured_initval + ',<br/>'); 
       } 
      }); 
     }(initval)); 

     initval++; 
    } while (initval <= endval); 
} 

は、1つまたは複数の要求が1, 2, 5, 3, 4か何かにつながる可能性が最初に完了するために、後者の要求を許可するサーバー、でハングアップを取得できることが、しかし、理解する：値の上に閉じると、それを行うための最も簡単な方法です。そうですね。

また、要素のIDを使用すると、ハッシュセレクタの先頭にelementsタグ名を付けるよりもはるかに高速です。さらに、成功が実行されるたびに結果DIVのためにDOMに再クエリするのを避けるべきです。一度それをつかむし、必要なときにそれを使用します。

function action() { 
    var initval = 1; 
    var endval = 5; 
    do { 
     var action_string = 'txtuser=someone', 
      $AppendResult = $('#append_result'); 

     (function(captured_initval){ 
      $.ajax({ 
       type: "POST", 
       url: "http://localhost/js.php", 
       data: action_string, 
       success: function(result){ 
        $AppendResult.append(captured_initval + ',<br/>'); 
       } 
      }); 
     }(initval)); 

     initval++; 
    } while (initval <= endval); 
} 

Answer 2

Ajaxリクエストが成功ハンドラが復帰すると、ループが既に完了した時点で意味し、非同期です。代わりに、あなたは価値を維持するためにクロージャを作成することができます。

success: (function(i){ 
    return function() { 
     $('div#append_result').append(i + ',<br/>'); 
    } 
})(initval) 

Answer 3

は、これは、AJAXの非同期動作は次のとおりです。ここで は修正版です：

var initval = 1; 
var endval = 5; 
function action(){ 
    var action_string = 'txtuser=someone'; 
    $.ajax({ 
     type: "POST", 
     url: "http://localhost/js.php", 
     data: action_string, 
     success: function(result){ 
      $('div#append_result').append(initval + ',<br/>'); 
      initval++; 
      if(initval<=endval) 
      action(); 
     } 
    }); 
} 

これはやや今シーケンシャルなアプローチであります。 注：私はすべてのAjaxリクエストが成功を返すと仮定しました。エラーがある場合、エラーコールバックでそれらを処理する必要があります。