잘못된 순서로 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 번호와 그것을 알아 차릴 수있는 때마다 다른 순서로 온다.

<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

$(this).load("showpost/" ...이 호출 될 때. 여러 개의 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 
      }); 
     }