同時に複数の非同期jQuery AJAX POSTが返される

Question

私はPHPでアプリケーションを開発していますが、アプリケーションは複数のAJAX POST（それぞれ少量のHTMLを返す）を作成する必要があります。これらのPOSTのそれぞれは、返されたHTMLをdivに挿入する必要があります。問題はありませんが、すべてのAJAX POSTを一度に開始すると問題が発生します（10を開始します）。POSTごとに別のdivを指定します。それらはすべて非同期であり、まったく同じ時刻にほぼすべて同じHTMLに戻るので、すべてのHTMLはそれぞれのdivの代わりに1つのdivに終わります。私は明確にするためにいくつかのコードを投稿します。ここに私の「apiCall」関数の削除されたバージョンがあります：

xhr = $.ajax({ 
    type: "POST", 
    url: "../api.php", 
    dataType: "json", 
    data: data, 
    success: function(data) { 
     obj.html(data.D['html']); 
    } 
}); 

問題が発生すると成功関数を回避します。 data.D ['html']にはPOSTのHTMLが含まれていますが、次のAJAX POSTによって上書きされていると思うので、最後にdivに入れられるAJAX POSTです（これはjQueryの一部です

$("#container).apiCall({options...}); 

誰もがこれらのAJAXポストは戻ったとき、私はその特定から返されたデータを置くことができるようにそれを作るためのソリューションを提供することができます：プラグイン私は、私はこのようにそれを呼び出す）で渡されたdiv要素であるOBJ、書きました正しいdivにPOSTしますか？

Answer 1

あなたはこれを何度もやっており、いつも同じobjを参照しています。 その間、あなたはあなたのオブジェクトを上書きしています。

すべてのajax関数が設定され、応答が到着する（そしてコールバックの実行が開始される）までに、すべてのobj参照がobjの最後の値を指しています。

（この場合は、このmyobj）別の変数でそれを維持するためにクロージャを使用します。

xhr = (function(){ 
    var myObj = obj; 
    return $.ajax({ 
     type: "POST", 
     url: "../api.php", 
     dataType: "json", 
     data: data, 
     success: function(data) { 
     myObj.html(data.D['html']); 
     } 
    }); 
})(); 

の代わりに何$アヤックスを（割り当て）がXHRに直接返し、それは無名関数を作成し、それを呼び出しますin：(function(){ /* code */ } )()

この関数は、objをmyObj（匿名関数の変数）に「バックアップ」し、単純に$ .ajax（）が返す値を返します。

私はこのコードをテストしませんでした。エラーがある場合は教えてください。