How to use 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.

Darren Crabb · Accepted Answer · 2013-10-17 10:48:51Z

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

answered Oct 17, 2013 at 10:48

Darren Crabb

5802 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gudron Swiss Over a year ago

Is it possible to it somehow this way: setTimeout(for (i ; i < arr_big.length - 1; i++) {console.log("RUUUUN")}, 1000);?

Darren Crabb Over a year ago

not really ... the problem with using a for loop is it will run immediately rather than on your timed intervals. So unless you want to see all images in a nanosecond, you'll want to keep an index and increment it accordingly whenever the interval happens.

Darren Crabb Over a year ago

setTimeout works similarly to setInterval, apart from it happens once rather than keep firing the function. For what you want I'd say setInterval is a perfect match.

Jayesh Goyani · Accepted Answer · 2013-10-17 10:43:50Z

0

You can also use below method.

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

OR

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

answered Oct 17, 2013 at 10:43

Jayesh Goyani

11.2k11 gold badges32 silver badges50 bronze badges

1 Comment

Gudron Swiss Over a year ago

Actually setTimeout(slide, 1000); works, but i need to do it automatically. So if i add a for loop like: for(i; i<arr_big.length-1; i++){ setTimeout(slide, 1000); } It is don't do anything.

Sebastien C. · Accepted Answer · 2013-10-17 10:49:39Z

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

RafH · Accepted Answer · 2013-10-17 10:53:25Z

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

Gudron Swiss · Accepted Answer · 2013-10-17 11:06:06Z

0

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

answered Oct 17, 2013 at 11:06

Gudron Swiss

4851 gold badge4 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to use setTimeout(), JavaScript

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related