How can I set timers in slideshow to show as selected?

Question

I have to create a slideshow, using an array of images and have that set on a timer. There is a drop-down menu with slow, medium, and fast options and the pictures need to transition with accordance to the drop down option selected. Whenever I execute this code in a web browser the code repeats itself, while doubling, as I read the value of i in the console.

I have tried using a while and a do-while loop to have the images on a rotation.

I have also tried putting the if-statements outside and below/above the function.

<script>
var i = 0;
function changeImg(){
    if (x == 'slow'){
        setInterval("changeImg()", 5000);
    } else if (x == 'medium'){
        setInterval("changeImg()", 3000);
    } else if (x == 'fast') {
        setInterval("changeImg()", 1000);
    } else {}

        while (i < 3){
            console.log(i);
            document.slide.src = sportsArray[i];
            i++;
        }

        console.log(i);
        console.log(sportsArray);
    }
</sctipt>

Davis DeVries · Accepted Answer · 2019-04-01T00:50:40.120

1

First, I would read up on MDN's docs on setInterval() and clearInterval to fill in the knowledge gaps that lead you to approach the problem this way.

You are recursively calling changeImg() in your code which I believe is causing the issue you describe as:

the code repeats itself, while doubling, as I read the value of i in the console

Also, your while loop will run immediately when calling changeImg() which also does not appear to be desired in this situation.

setInterval() mimics a while loop by nature. There is no need for a while loop in this code. Below is a solution that I hope you can use as a reference. I separated the code to determine the interval into a function the getIntervalSpeed.

function changeImg(x) {
    var getIntervalSpeed = function(x) {
        if (x === 'slow') {
            return 5000;
        } else if (x === 'medium') {
            return 3000;
        } else if (x === 'fast') {
            return 1000;
        } else {
            return 3000;
            // return a default interval if x is not defined
        }
    };

    var i = 0;

    var slideShow = setInterval(function() {
        if (i >= sportsArray.length) {
            i = 0; // reset index
        }

        document.slide.src = sportsArray[i]; // set the slide.src to the current index
        i++; // increment index
    }, getIntervalSpeed(x));

    // on click of ANY button on the page, stop the slideshow
    document.querySelector('button').addEventListener('click', function() {
        clearInterval(slideShow);
    });

}

edited Apr 01 '19 at 00:50

answered Mar 31 '19 at 23:01

Davis DeVries

36
4

This is a huge help, thank you! One more question though - How can I set the *clearInterval(slideShow)* to a button. Also how would I make the function so that the loop is infinite, as in restarting back to array[0] after *i* reaching 3? – Sleever Mar 31 '19 at 23:35
As for binding clearInterval(slideShow) to a button click event, I'd check out [this post](https://stackoverflow.com/questions/42543966/setinterval-and-clearinterval-through-button-click-events) to get some ideas. As for making the loop infinite, you'll only need to change one line of code from my answer above. Think about it. If `i >= 3`, then you should set `i` to what? – Davis DeVries Mar 31 '19 at 23:57
You could also checkout [this solution](https://stackoverflow.com/a/36022170/11287029) to call clearInterval() on a click event – Davis DeVries Apr 01 '19 at 00:03
set `i = sportsArray.length`? I have no clue what I would set it to. I have also made a function `function stopPics(){ clearInterval(slideShow); }` although I cannot get that to work... (The console says *slideShow* is undefined.) – Sleever Apr 01 '19 at 00:30
I've updated my solution above to reflect what you need. You need to reset `i = 0`. I added logic that on click of any button element on the page, will stop the slide show, you need to change the `querySelector` function to select your specific button. `slideShow` needs to be defined in the calling scope, that's why you're getting undefined. – Davis DeVries Apr 01 '19 at 00:51

How can I set timers in slideshow to show as selected?

1 Answers1