Javascript repeat function x times for y seconds

Question

I thought this questions must have been asked before, but i couldnt find another thread for this. Anyways I want to repeat a function 20 times, and half a second between each time.

  for (var i = 0; i < 20; i++)
     {
            setTimeout(function(){  
                   mySwiper.update();
                   console.log("Test");}, 500);

     }

But at the moment it just wait for half a second, then repeat itself 20 times in 1 go. Not sure how to do it. Thanks for your time

https://stackoverflow.com/search?q=loop+timeout+%5Bjavascript%5D — Bergi, Mar 06 '15 at 05:06

score 3 · Accepted Answer · answered Mar 06 '15 at 05:03

3

It's a bit of hack, but you can multiply the interval by the index to give it the same effect.

for (var i = 0; i < 20; i++) {
    setTimeout(function() {
        mySwiper.update();
        console.log("Test");
    }, 500 * i);
}

answered Mar 06 '15 at 05:03

Amit Joki

58,320
7
77
95

score 3 · Answer 2 · answered Mar 06 '15 at 05:03

The problem you're facing is because setTimeout (and setInterval) works on another thread. Your look finishes is an instant, so essentially all your timers are started at the same time. What you want to do is chain them together recursively, so that each timer calls the next one, and keeps the count.

function count(num){
    setTimeout(function(){  
        mySwiper.update();
        console.log("Test");
        if(num > 0) count(num - 1);
    }, 500);
}

Then, instead of a loop, you'd just do

count(20);

As a note, if you want it to fire every half a second no matter how long everything else takes, move use what @Arun suggested. My method makes it take another 500ms after everything is finished.

score 1 · Answer 3 · answered Mar 06 '15 at 05:02

If you look at how you have used setTimeout, you are calling setTimeout 20 times with the delay as 500 which means after 500ms the passed function will be executed 20 times one by each call to setTimeout().

One solution is to use a counter and setInterval()

var counter = 0,
    interval = setInterval(function () {
        mySwiper.update();
        if (++counter == 20) {
            clearInterval(interval);
        }
    })

Javascript repeat function x times for y seconds

3 Answers3