各ループのjQuery ajax

Question

$ .eachループ内で成功関数（ajax）の値を取得する際に問題があります。

私はこのような何かを持っている：

var test = []; 
$.each(images, function(index){ 
    var formData = new FormData(); 
    formData.append('image', images[index]); 

    $.ajax({ 
     url: 'http://localhost/admin/api/offers/upload_photo', 
     data: formData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     type: 'POST', 
     beforeSend: function(){ 
      console.log(test.length);    
      test.push(images[index]);  
     }, 
     success: function(){ 
      console.log(test.length); 
     } 
    }); 
}); 

そしてbeforeSendの出力が細かい（コンソールログ：0、1、2）動作しますが、もう一つは3回3（コンソールログを返します。3、 3,3）。残りは問題なく動作し、私はそれだけで苦労します。私を助けることができる人はいますか？ありがとう！

Answer 1

デフォルトでは、AJAXリクエストは非同期です。つまり、サーバーに要求を送信しますが、コードを続行する前に応答が返るのを待つことはありません。したがって、$.each()ループは3つのAJAX要求をすべて送信し、すべてのbeforeSend:関数をただちに実行します。 success:関数は応答が処理されるまで実行されません。これは、コードがメインブラウザのイベントループに戻るまで有効になりません。

すべての応答が処理される前にすべてのbeforeSend:関数が実行されるため、success関数が実行されると、test配列はすべての画像で塗りつぶされます。だから彼らはすべてtest.length == 3と表示されます。