如何使用setTimeout（），JavaScript

Question

I have added a "play" button to my image gallery slideshow, now when i press this button the pictures should change every 3000 mlsec for example.

I know that i need use "setTimeout()" inside the for loop, while my var i will not reach the value of the array_pics.lenght. But i can't make it work.

play.onclick = function play() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function slide() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;
    };

    slide(); //I have tryed setTimeout(slide(), 3000) here inside the for loop. Does not work!

};

Can someone help me to make it work? How i can use setTimeout() and for loop? Thanks.

Answer 1

If you want a repeated action it's often better to use setInterval() rather than setTimeout() and use clearInterval() when you want it to stop. I would take the function definitions out of the onclick handler and make sure your index counters are global rather than local to the functions. Just some starting points for you.

So something along the lines of ...

var index = 0;
var timer = 0;
var maxNumOfImages = arr_big.length;

play.onclick = playMe; //changed the function name to avoid confusion between button and function
stop.onclick = stopMe;

function playMe() {
    document.getElementById('largeImg').src = arr_big[index].src;
     timer = setInterval( slide, 3000 );
}

function slide() {
    index += 1;
    if (index == maxNumOfImages) {
       index = 0;
    }
    document.getElementById('largeImg').src = arr_big[index].src;
 }

function stopMe() {
    clearInterval( timer );
}

Answer 2

You can also use below method.

setTimeout(function () { slide(); }, 3000);

OR

setTimeout(function () { slide() }, 3000);

Answer 3

You must call setTimeout into the slide function to repeat it each 3 seconds. And I think you don't need to name every of your functions.

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;

        setTimeout(slide, 3000);
    };

    slide();

};

Edit : You can also use setInterval :

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    setInterval(
        function() {
            i = ind;
            ind += 1;
            index = ind;
            document.getElementById('largeImg').src = arr_big[ind].src;
        },
        3000
    );
};

Answer 4

If you need to be abble to play / pause the cycle, you need to use setInterval.

Example

(function() {
   var arr_big = [
    {src:"http://placehold.it/350x150"},
    {src:"http://placehold.it/350x250"},
    {src:"http://placehold.it/350x350"}    
   ];

 var iid, index;

function  slide () {        
   index = (index+1 == arr_big.length) ? 0 : index +1;
   document.getElementById('largeImg').src = arr_big[index].src;
}

playBtn.onclick = function () { 
   index = 0
   iid = setInterval(slide       , 500);
}
stopBtn.onclick = function() {
  clearInterval(iid)
}
})();

HTML

<button id="playBtn">play</button>
<button id="stopBtn">stop</button>
<p><img src="http://placehold.it/350x150" id="largeImg" /></p>

Here is a working jsfiddle

Answer 5

I solved it, here is my code.

Thank you, guys! You all helped me a lot!

play.onclick = function play() {
    document.getElementById('largeImg').src = arr_big[index].src;

    var slide = function slide() {
        if(index > arr_big.length-5) {
             index = 0;
         }
         index += 1;
         document.getElementById('largeImg').src = arr_big[index].src;
         setTimeout(slide, 1000);                           
     };
     slide();
};