Javascript / jQuery установить задержку, всплывающее нижний элемент из DOM

Question

У меня $.each() l oop при jQuery AJAX звонке. Для каждого элемента в моих ответных данных я хочу добавить в класс индекса в моем индексе сегмент HTML. html file.

Вы можете посмотреть код ниже как codepen здесь , так как мобильное форматирование является плохим и, вероятно, оно вставлено неправильно

$.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() прекрасно работает, и когда я перезагружаю свою веб-страницу, я вижу последний элемент вверху страницы. В основном ожидаемое поведение таково, что это действует как очередь, поэтому первый элемент идет вниз, второй укладывается поверх него и т. Д. c и c, пока я не достигну конца запрошенного JSON, и последний элемент находится сверху.

В настоящее время у меня есть две проблемы:

1. setTimeout() не работает. Все элементы входят сразу, и я не могу понять, как поставить задержку на каждую итерацию. Это должно работать вместе с моим slideDown() вызовом. Каждые несколько секунд сдвигайте следующий элемент.

2. После счетчика i > 4 я хочу удалять последний элемент из DOM на каждой итерации. Это будет держать не более 5 элементов на экране, и каждый цикл, который мы выбрасываем, последний или самый старый, один из нижней части очереди. Я не могу понять эту часть либо. Если бы я раскомментировал блок if в верхней части $.each() l oop, на экране ничего не появилось бы.

Если бы кто-то мог решить эти две проблемы, это быть великим Спасибо!

Answer 1

Я не уверен, что вы пытаетесь удалить в $($("section").last()).remove(), но я предполагаю, что вы пытаетесь удалить недавно вставленный div, в этом случае вы не должны были выбирать section. Предполагая, что все responseData доставлено до запуска функции, я создал это решение ниже. Я также установил время, в которое новые row с добавляются до 1000 мс.

Что вы хотите сделать, это в основном обернуть ваш setTimeout за пределы функции предопределения и установить время для увеличения на индекс. Я действительно рекомендую прочитать все объяснение, предоставленное на этой странице MDN , чтобы четко понять 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>