Javascript/jQuery 设置时间延迟，从 DOM 中弹出底部元素

Question

我有一个$.each()在 jQuery AJAX 调用中循环。对于响应数据中的每个元素，我想将一段 HTML 添加到我的 index.html 文件中的容器类中。

您可以将下面的代码视为 codepen here ，因为移动格式很糟糕，这可能无法正确粘贴

$.each(responseData, function(i, item) {
    /*
    if(i > 4){
        $($("section").last()).remove();
    }
    */
    try{
        username = item.user.name;
        user_text = item.text;
        imgURL = item.user.profile_image_url;
        hashtags = item.entities.hashtags;
        let hashtagsDiv = ""
        if(hashtags.length > 0){
            hashtagsDiv = "<div class='row'><div class='col s10 offset-s2'>HASHTAGS: "
            for(i = 0; i < hashtags.length; i++){
                hashtagsDiv += "#"+hashtags[i].text+"; ";
            }
            hashtagsDiv += "</div></div>"
        }
        $("<div class ='row'>\
            <div class ='col s12'>\
                <section class='card-panel grey lighten-5 z-depth-1'>\
                    <div class='row valign-wrapper'>\
                        <div class='col s2'>\
                            <img src=\"" + imgURL + "\" alt='profile_pic' class='circle responsive-img'>\
                        </div>\
                        <div class='col s10'>\
                            <span class='black-text'> @" + username + " says: " + user_text + "</span>\
                        </div>\
                    </div>\
                    " + hashtagsDiv + "\
                </section>\
            </div>\
        </div>").prependTo(".container").slideDown();
        $(function(){  
            window.setTimeout(5000);
        });
    }  
    catch(err){
        console.log("ERROR: " + err.message);
    }
});

.container在 prependTo()是 <section> 中的一个类我的 HTML 文件中的标记。 prependTo()工作正常，当我重新加载网页时，我会在页面顶部看到最后一个元素。基本上预期的行为是，它就像一个队列，因此第一个元素位于底部，第二个元素位于其顶部，依此类推，直到我到达所请求的 JSON 的末尾，最后一个元素位于顶部。

目前我有两个问题:

1. setTimeout()不起作用。所有元素同时出现，我 似乎无法弄清楚如何在每次迭代上延迟。这应该与我的 slideDown() 结合使用称呼。每隔几秒，向下滑动下一个元素。

2. 一旦柜台i > 4 ，我想每次迭代时从 DOM 中删除最后一个元素。这将在屏幕上保留最多 5 个元素，并且每个周期我们都会从队列底部弹出最后一个或最旧的元素。我似乎也无法弄清楚这部分。如果我取消注释 if位于 $.each() 顶部的 block 循环，屏幕上什么也没有显示。

如果有人能够解决这两个问题那就太好了。谢谢!

Answer 1

我不确定您要在 $($("section").last()).remove() 中删除什么，但我假设您是尝试删除新插入的 div，在这种情况下您不应选择 section。假设所有 responseData 在运行该函数之前传递，我在下面创建了这个解决方案。我还将新行的前置时间设置为 1000 毫秒。

您想要做的基本上是将您的 setTimeout 包装在前置函数之外，并设置每个索引增加的时间。我真的建议阅读提供的全部解释in this MDN page清楚地了解setTimeout。

这是最小的工作示例:

let responseData = [0, 1, 2, 3, 4, 5, 6, 7]

$.each(responseData, function(i, item) {
  setTimeout(function() {
      try {
        $(`<section>Section Number ${i}</section>`)
          .prependTo(".container")
          .slideDown();
      } catch (err) {
        console.log("ERROR: " + err.message);
      }
      
      if (i > 4) {
        console.log(i)
        $("section").last().remove()
      }
  }, i * 1000)
});

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