Question

我必须每次经过一个数组x次并显示在列表上，所以它会自动垂直下降。

<ul class="list-group">
</ul>

问题是我所拥有的只是我的数据数组。我如何每x时间一次遍历并显示在列表中？

$(function(){
    var data = GetData();
    $('.list-group').append(data);
});

Answer 1

var data = ['item1','item2','item3','item4'];
var index = 0;
var myinterval;
$(document).ready(function(){
  myinterval = setInterval(addItem, 1000);
});

function addItem()
{
  $('.list-group').append('<li>'+data[index]+'</li>');
  index++;
   if(index == data.length)
    clearInterval(myinterval);
  
}

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

<ul class="list-group">
</ul>

Answer 2

您可以使用forEach遍历数据，并在间隔后添加每个元素：

const data = [1,2,3,4,5];

const list = document.getElementById("list");
data.forEach((x, index) => {
  setTimeout(() => {
    const li = document.createElement("li");
    li.innerHTML = x;
    list.appendChild(li);
  }, index * 1000);
});

<ul id="list"></ul>

每x次将项目自动添加到列表中

2 个答案: