一个接一个地使用 setInterval() 循环函数

Question

我的目的是显示前 3 张幻灯片 x 次，然后显示下 3 张幻灯片 x 次，之后前 3 张幻灯片将再次显示，一切都会循环播放。我怎样才能做到这一点？

这是我已有的代码，但当我需要 "restart" 一切时我会卡住：

HTML 样本：

<div class="contents">
<div class="transit">
    <div class="content ctransit_" id="ct_1"  >
        <div class="main_transit" >     <h1>1.1slide</h1> </div>
    </div>
    <div class="content ctransit_" id="ct_2"   >
        <div class="main_transit">  <h1>1.2slide</h1> </div>
    </div>
    <div  class="content ctransit_" id="ct_3"  >
        <div class="main_transit">  <h1>1.1slide</h1>
    </div>
 </div>
 <div class="arrived">
    <div class="content carrived_ " id="ct_1" >
        <div class="main_arrived">  <h1>2.1slide</h1> </div>
    </div>
    <div class="content carrived_" id="ct_2" >
        <div class="main_arrived">  <h1>2.2slide</h1> </div>
    </div>
    <div  class="content carrived_" id="ct_3">

        <div class="main_arrived">  <h1>2.3slide</h1></div>
    </div>
</div>
</div>

JS :

var c=0;
var k=0;

function setIntervalX(interationFunction, delay, repetitions, callbackFunction) {
var x = 0;
var intervalID = window.setInterval(function () {

    interationFunction();

    if (++x === repetitions) {
        callbackFunction();
        window.clearInterval(intervalID);
    }
}, delay);}


$(".carrived_").hide();
    $(".ctransit_").not(":first").hide();

   setIntervalX(
   function() {
    $(".ctransit_:gt(0)").hide();
        $('.ctransit_:first')
                .slideUp(1000)
                .next().addClass(inClass)
                .slideDown(1500)
                .end().addClass(outClass)
                .appendTo('.contents .transit ');

        console.log(c++) // this executed every time the interval triggers  
     },3000, 5, 
    function() {    
        $(".transit").hide();
        $(".ctransit_").hide();

        $(".carrived_:first").show().addClass(inClass)
            $(".carrived_").not(":first").hide();


          var x = 0;

        var intervalID = window.setInterval(function () {

        $(".carrived_:gt(0)").hide();
        $('.carrived_:first')
        .slideUp(1000)
        .next().addClass(inClass)
        .slideDown(1500)
        .end().addClass(outClass)
        .appendTo('.contents .arrived ');
                        if (++x === 5) {
                            window.clearInterval(intervalID);
                        }
        console.log(x)
        }, 3000);
// this will be executed after the interval triggered 5 times
// so after round about 5 seconds after setIntervalX was started
}

https://jsfiddle.net/kqLkLwrk/4/

Answer 1

我最喜欢的是制作一个可以处理循环的函数，将需要的参数放入数组然后循环索引。我们开始吧：

function showSlide(arr,index){
    if(arr.length==0) return;
    if(index>=arr.length) index=0;
    var cur = arr[index];
    var target = cur[0];
    var container = cur[1];
    var delay = cur[2];
    var rep = cur[3];

    $(".ctransit_").hide();
    $(".carrived_").hide();
    $(target).first().show();
    setIntervalX(function() {
        $(target).not(":first").hide();
        $(target).first().show()
            .slideUp(1000)
            .next().addClass(inClass)
            .slideDown(1500)
            .end().addClass(outClass)
            .appendTo(container);

        console.log(c++)
        // this executed every time the interval triggers   
  },delay,rep, function(){
      index++;
      showSlide(arr,index);
  });
}

showSlide([
    [".ctransit_",'.contents .transit',3000,6],
    [".carrived_",'.contents .arrived',3000,5]
],0);

https://jsfiddle.net/kqLkLwrk/4/

一个接一个地使用 setInterval() 循环函数

Loop functions with setInterval() one after another

javascript

jquery

loops

function

setinterval