CODEWITHSUNDEEP
javascript
Gudron Swiss
Gudron Swiss

Reputation: 465

How to use setTimeout(), JavaScript

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.

Upvotes: 0

Views: 821

Answers (5)

Gudron Swiss
Gudron Swiss

Reputation: 465

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();
};

Upvotes: 0

RafH
RafH

Reputation: 4544

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

Upvotes: 0

Sebastien C.
Sebastien C.

Reputation: 4833

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
    );
};

Upvotes: 0

Darren Crabb
Darren Crabb

Reputation: 580

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 );
}

Upvotes: 1

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

You can also use below method.

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

OR

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

Upvotes: 0

Related Questions