如何按时间间隔显示和隐藏上一个和新项目Jquery

Question

我处理的数据量很大，并且所有数据都不在屏幕中，因此决定根据时间间隔更改数据。当我的页面在数组中加载时，我收到了18 个项目，我将它们放入div 中。

所以我需要在页面前 8 个项目中显示，在 10 秒之后，再显示8个项目，最后显示 2 个项目(因为我只有18个项目。所以我创建了逐个显示div 的脚本，但我需要在 8 秒内显示 10 个

var current = 0;
setInterval(function () {
var divs = $(".cards").hide();
divs.eq(current).fadeIn("normal");
console.log(divs.eq(current))
if (current < divs.length - 1)
current++;
else
current = 0;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">1</div>
<div class="cards">2</div>
<div class="cards">3</div>
<div class="cards">4</div>
<div class="cards">5</div>
<div class="cards">6</div>
<div class="cards">7</div>
<div class="cards">8</div>
<div class="cards">9</div>
<div class="cards">10</div>
<div class="cards">11</div>
<div class="cards">12</div>
<div class="cards">13</div>
<div class="cards">14</div>
<div class="cards">15</div>
<div class="cards">16</div>
<div class="cards">17</div>
<div class="cards">18</div>

那么它必须如何工作：

前 10 秒显示div 从 1-810 秒后显示9-16的项目 最后显示休息2div 但是对于这个示例，我有 18，但这个数据将是动态的，我不知道我会有多少个div

Answer 1

一个解决方案：

var current = 0;
$(".cards").hide();
setInterval(function () {
var divs = $(".cards").hide();
var i = 0;
while (i < 8) {
divs.eq(current).fadeIn("normal");
console.log(divs.eq(current))
if (current < divs.length) {
i++;
current = current + 1;
} else  {
i = 0;
current = 0;
}
}
}, 10000);

Answer 2

找到解决方案：

脚本：

$(document).ready(function () {
var elements = $(".cards");
var index = 0;
var showNext = function (index) {
if (index >= elements.length) {
index = 0;
}
console.log(index);
elements.hide().slice(index, index + 8).show();
setTimeout(function () {
showNext(index + 8)
}, 10000);
}
showNext(0);
});