Restart function when done in Javascript

Question

I'm trying to get this to restart when done, or every 6 seconds:

window.onload = function() {
document.getElementById('slide1').style.display = "none";
document.getElementById('slide1').style.display = "block";
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";
        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
        }, 1000);
    }, 1000);
}

I've tried the other questions in Stack Overflow, but they don't work.

Thanks in advance.

Possible duplicate of [setTimeout or setInterval?](http://stackoverflow.com/questions/729921/settimeout-or-setinterval) — Ryan, Jun 23 '16 at 23:02
You mean "or every 6 seconds" as in that's how long it should take to "finish" right, since it's 2 1000ms timeouts? — TheZanke, Jun 23 '16 at 23:33

MoustafaS · Answer 1 · 2016-06-23T23:08:51.947

This should do.

The original code was going through elements slide1 to slide6, every second it will hide the last one and show the new one, ex: hide slide1-show slide2, hide slide2-show slide3, etc....

This code replaces the setTimeout with setInterval, which then checks an index var to hide the latest shown one and shown the next one and then increments the index.

var index=1;
window.onload = function() {
document.getElementById('slide1').style.display = "block";
    setInterval(function(){
    if(index==6)
    index=1;
        document.getElementById('slide'+index).style.display = "none";
        document.getElementById('slide' + (index+1)).style.display = "block";
        index = index+1;
    }, 1000);
}

Care to explain why "This should do" ? No details of the changes made and/or why... This might solve the problem but doesn't explain why the original source isn't functioning as intended. — NewToJS, Jun 23 '16 at 23:06

score 0 · Answer 2 · answered Jun 23 '16 at 23:07

You mean this?

// run every end of process:
var loader = function() {
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";

        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
            loader();
        }, 1000);
    }, 1000);
};

window.onload = function() {
    document.getElementById('slide1').style.display = "none";
    document.getElementById('slide2').style.display = "block";
    loader();
};

// Or you can run every 6 seconds
var loader = function() {
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";

        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
            loader();
        }, 1000);
    }, 1000);
};

window.onload = function() {
    document.getElementById('slide1').style.display = "none";
    document.getElementById('slide2').style.display = "block";

    //initial run
    loader();

    //run every 6 seconds
    setInterval(loader, 6000);
};

score 0 · Answer 3 · answered Jun 23 '16 at 23:13

To answer your main question on "how to restart?", in this example you could make use of the modulus operator (%).

In addition, rather than using querySelector each time the timer fires, try saving the HTML elements in variables.

Below is an example with 5 hard-coded slides, or, slide elements.

// initialize variables
var slideElements = [];
slideElements.push(document.getElementById("slide1"));
slideElements.push(document.getElementById("slide2"));
slideElements.push(document.getElementById("slide3"));
slideElements.push(document.getElementById("slide4"));
slideElements.push(document.getElementById("slide5"));
var currentSlideIndex = 0;
var numberOfSlides = slideElements.length;
var slideTimeMs = 1000;

// initialize slide elements
for(var i = 0; i < numberOfSlides; i++) {
    slideElements[i].style.display = 'none';
}
slideElements[0].style.display = 'block';

// start interval timer
setInterval(function() {
    slideElements[currentSlideIndex].style.display = 'none';
    currentSlideIndex = (currentSlideIndex + 1) % numberOfSlides;
    slideElements[currentSlideIndex].style.display = 'block';
}, slideTimeMs);

TheZanke · Answer 4 · 2016-06-23T23:57:53.377

I think I understand your question. If you want to rotate through slides and restart when you get to the end here's what I'd do:

Firstly, create a function that we can pass an array of "slides". This function will have local variables that define the index of our current slide, and the index of the last slide (so we know when to restart).

We create a slide function that'll handle getting the elements, hiding/showing the next and previous elements, and incrementing (or resetting) our index.

var rotateSlides = function (slides, delay) {
  // Start on the first slide in our list
  var currentIndex = 0;
  
  // Our final slide index
  var lastIndex = slides.length - 1;
  
  // Our main slide function
  var slideFn = function () {
    // The next slide, which we will be showing
    var next = slides[currentIndex];
    
    // declare previous, will be set later
    var previous; 
    
    if (currentIndex === 0) {
      // Set previous to the last slide in our list if we're current on index 0
      previous = slides[lastIndex];
    } else {
      // Otherwise, set previous to currentIndex - 1
      previous = slides[currentIndex - 1];
    }
    
    // Hide the previous slide
    previous.style.display = "none";
    
    // Show the next slide
    next.style.display = "block";
    
    if (currentIndex !== lastIndex) {
      // Increment currentIndex if we aren't on our last slide
      currentIndex += 1;
    } else {
      // Reset currentIndex if we ARE on our last slide
      currentIndex = 0
    }  
  };
   
  // call our function right away to start it
  slideFn();
  
  // set an interval to call our function at the given speed
  window.setInterval(slideFn, delay);
}

// Call our rotate function on a list of elemetns and
// pass a duration each slide should be visible for
rotateSlides([
  document.getElementById('slide1'),
  document.getElementById('slide2'),
  document.getElementById('slide3')
], 1000);

<div id="slide1">Slide1</div>
<div id="slide2" style="display: none;">Slide2</div>
<div id="slide3" style="display: none;">Slide3</div>

If you want to slow it down so it takes 6 seconds, change 1000 to 2000 where we call rotateSlides.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Restart function when done in Javascript

4 Answers4