javascript - 如何按时间间隔显示和隐藏上一个和新项目(How to show and hide previous and new item by time interval Jquery)

Question

I work with big quantity of data, and all data are not fering in screen, was decided to change data depends of time interval.

(我处理大量数据，并且所有数据都不在屏幕上显示，因此决定根据时间间隔更改数据。)

When my page is load in array i received 18 items , which i put in to div's.

(当我的页面加载到数组中时，我收到了18个项目 ，我将它们放入div的项目中。)

So i need show in page first 8 items , after 10 second, another 8 items , and in the end show 2 items (because i have only 18 items .).

(所以我需要在页面上显示前8个项目 ，在10秒后显示另外8个项目 ，最后显示2个项目 （因为我只有18个项目 。）。)

So i create script which show one by one div's, but i need show 8 in 10 second

(所以我创建了一个脚本，显示一个一格的div，但是我需要在10秒内显示8个)

 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> 

So how it's must works:

(所以它必须如何工作：)

First 10 sec show div's from 1-8 After 10 sec show items from 9-16 And in the end show rest 2 div's But for this exmple i have 18, but this data will be dynamicaly, and i dont know how many div's i will have

(前10秒从1-8开始显示div，后10秒从9-16开始显示项目，最后显示其余2 div，但是对于这个示例，我有18，但是该数据将是动态的，并且我不知道我将有多少div有)

  ask by Andrew translate from so

Answer 1

A solution:

(一个办法：)

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);