HTML要素の順序が間違っているAjax呼び出し

Question

サーバーコードをajax呼び出しして、ページにレコードを追加します。しかし、それは私がそれを期待するために戻っていません。以下は、サーバーコードへのAjax呼び出しを行う関数です。サーバー側のコードからのデータは正しい順序でデータを処理し、呼び出しが最初にデータを取得したときに正しい順序でデータを取得します。

function GetPosts() 
{ 
    $.ajax 
    ({ 
     type: 'GET', 
     url: 'getposts', 
     data: {'pageIndex': JSON.stringify(pageIndex), 'pageSize': JSON.stringify(pageSize) }, 
     dataType: 'json', 
     success: function (data) 
     { 
      for (var i = 0; i < data.length; i++) { 
       $(this).load("showpost/" + data[i], function (result) { 
        $('#container').append(result); 
       }) 
      } 
      pageIndex++; 
     }, 

     beforeSend: function() { 
      $("#progress").show(); 
     }, 
     complete: function() { 
      $("#progress").hide(); 
     }, 
     error: function() { 
      alert("Something went terribly wrong with infinite scrolling " + pageIndex); 
     } 
    }) 
} 

しかし、私はページこれは、データをHTMLページに表示する場合、投稿が降順にする必要がありますどのように見えるべきかである

<div class="posts" id="posts_25"></div> 
<div class="posts" id="posts_24"></div> 
<div class="posts" id="posts_23"></div> 
<div class="posts" id="posts_22"></div> 
<div class="posts" id="posts_21"></div> 
<div class="posts" id="posts_20"></div> 
<div class="posts" id="posts_19"></div> 
<div class="posts" id="posts_18"></div> 
<div class="posts" id="posts_17"></div> 
<div class="posts" id="posts_16"></div> 
<div id="container"> 
<div class="posts" id="posts_15"></div> 
<div class="posts" id="posts_9"></div> 
<div class="posts" id="posts_8"></div> 
<div class="posts" id="posts_7"></div> 
<div class="posts" id="posts_5"></div> 
<div class="posts" id="posts_10"></div> 
<div class="posts" id="posts_11"></div> 
<div class="posts" id="posts_12"></div> 
<div class="posts" id="posts_14"></div> 
<div class="posts" id="posts_13"></div> 
<div class="posts" id="posts_4"></div> 
<div class="posts" id="posts_1"></div> 
<div class="posts" id="posts_2"></div> 
<div class="posts" id="posts_3"></div> 
</div> 

に電話をかけるとき、これは私が見たデータでありますこれはあなたがID番号で気づくことができ、呼び出されるたびに別の順序で来ます。 $(this).load("showpost/" ...が呼び出され

<div class="posts" id="posts_25"></div> 
<div class="posts" id="posts_24"></div> 
<div class="posts" id="posts_23"></div> 
<div class="posts" id="posts_22"></div> 
<div class="posts" id="posts_21"></div> 
<div class="posts" id="posts_20"></div> 
<div class="posts" id="posts_19"></div> 
<div class="posts" id="posts_18"></div> 
<div class="posts" id="posts_17"></div> 
<div class="posts" id="posts_16"></div> 
<div id="container"> 
<div class="posts" id="posts_15"></div> 
<div class="posts" id="posts_14"></div> 
<div class="posts" id="posts_13"></div> 
<div class="posts" id="posts_12"></div> 
<div class="posts" id="posts_11"></div> 
<div class="posts" id="posts_10"></div> 
<div class="posts" id="posts_9"></div> 
<div class="posts" id="posts_8"></div> 
<div class="posts" id="posts_7"></div> 
<div class="posts" id="posts_5"></div> 
<div class="posts" id="posts_4"></div> 
<div class="posts" id="posts_3"></div> 
<div class="posts" id="posts_2"></div> 
<div class="posts" id="posts_1"></div> 
</div> 

Answer 1

。あなたは複数のajaxコールを送ってpostsをロードしました。負荷の速度に応じて、ランダムに戻ります。

これを回避するには、ajax呼び出しを送信する前にdomスタブ/プレースホルダを準備する必要があります。それが返ってくると、それぞれの結果でスタブを更新します。

 var stubs = {}; 
     for (var i in data) { 
      stubs[i] = $('<div></div>'); 
      $('#container').append(stubs[i]); 
      $(this).load("showpost/" + data[i], function(result) { 
       stubs[i].after(result); //insert result after stub 
       stubs[i].remove(); // remove the stub 
      }); 
     }