Adrian A Adrian A - 5 days ago 6
jQuery Question

Loop functions with setInterval() one after another

my purpose is to show the first 3 slides x amount of times and then show the next 3 slides x amount of times, after that the first 3 slides will show again, everything will be looper.
How can i do that ?

Here is the code i have already but i get stuck when i need to "restart" everything:

Sample of 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

My favorite is make a function that can handle through loop, put params needed to an array then loop the index. Here we go:

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/

Comments