jquery - Ajax 调用以错误的顺序排列 HTML 元素

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);
      }
  })
}

但是这是我在页面上调用时看到的数据

<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>

这就是数据在 html 页面上呈现时的样子，帖子应该按降序排列，您可以通过 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 stub /占位符。当它返回时，您将分别用每个结果更新这些 stub 。

      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
          });
      }