jquery append 刪除和追加

Question

我試圖一次顯示 4 個對象，但不知何故它顯示了所有對象。 在下面的代碼中，我希望顯示 4 個用戶，然后淡出，然后顯示接下來的四個用戶。 相反，它顯示所有用戶，然后淡出。 哪里錯了？

$(document).ready(function() {
  $.getJSON("MyjSON.json", function(data) {
    var text = '';
    var len = data.length;
    for (var i = 0; i < len; i++) {
      userName = data[i];
      text += '<p>' + i + '===========' + userName.user.name + '----> </p>'
      if ((i % 4) === 0) {
        console.log(i);
        $('#tFeed').append(text);
        $('#tFeed').fadeOut(3000).remove();
        // I tried $('#tFeed').fadeOut(3000); and it still did not work
        text = '';
      }
    }
  });
});

Answer 1

動畫和淡入淡出是異步的，但循環的其余部分同步運行並且不等待它完成。

您需要使用fadeOut()的回調函數將操作推遲到完成為止。

淡出后，您需要再次顯示 DIV。 並且您應該使用.html()而不是.append()以便刪除以前的用戶。

 const data = ["a", "b", "c", "d", "e", "f", "g", "h", "i"]; function displayNext(arr, start, count) { let len = Math.min(arr.length, start + count); let text = ''; for (var i = start; i < len; i++) { const userName = arr[i]; text += '<p>' + i + '===========' + userName + '----> </p>' } $('#tFeed').html(text).show(); if (len == arr.length) { // last group $("#tFeed").fadeOut(3000); } else { $("#tFeed").fadeOut(3000, function() { displayNext(arr, start + count, count); }); } } displayNext(data, 0, 4);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tFeed"></div>