Loop every five seconds in Javascript

Question

I'm trying to write a simple loop in JS (or JQuery) that updates an image every five seconds, for a total of 15 seconds (so three loops), and then quits.

It should go like this:

1. Wait five seconds
2. Execute
3. Wait five seconds
4. Execute
5. Wait five seconds
6. Execute
7. Quit

But setTimeout only seems to work once.

As a test, I've tried:

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 5000);
}

for (var i = 1; i <= 5; ++i)
  doSetTimeout(i);

Does not work: http://jsfiddle.net/ubruksco/

I've also tried:

for(var i = 1; i <= 5; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, 5000);
    })(i);
}

Does not work: http://jsfiddle.net/Ljr9fq88/

Solution 1

var time = 1;

var interval = setInterval(function() { 
   if (time <= 3) { 
      alert(time);
      time++;
   }
   else { 
      clearInterval(interval);
   }
}, 5000);

you can simply create an interval and kill it after the 3rd time

Solution 2

The reason is that your settimeout ends all at the same time (after 5 seconds) because your timeout code is based on 5 seconds

for(var i = 1; i <= 5; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, 5000);
    })(i);
}

What you want to do is change the timeout time based on your index (hence will have different start times.

for(var i = 0; i < 3; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, index*5000);
    })(i);
}

(Also needs 3 iterations, so edited out the loop for you)

Solution 3

Make it easy! You do not need loop, you just need three executions.

setTimeout(function() { alert(1); }, 5000);
setTimeout(function() { alert(2); }, 10000);
setTimeout(function() { alert(3); }, 15000);

But, if you really want a loop:

function doSetTimeout(i) {
    setTimeout(function() { alert(i); }, i*5000);
}
for (var i = 1; i <= 3; ++i)
    doSetTimeout(i);

Solution 4

You want setInterval() instead

 setInterval(function(){ alert("Do Something"); }, 3000);

Solution 5

Assuming your are using jQuery (to manipulate the DOM),

you can try this:

['img1.jpg', 'img2.jpg', 'img3.jpg'].forEach(function(imgPath, index) {
    // the callback will be executed in 5seconds * (index + 1)
    setTimeout(function() {
       // change image source
       $('img#myImage').attr('src', imgPath);
    }, 5000 * (index + 1));
});

View more solutions

Comments

[Justinas]

It will execute infinite times

[Chuck Le Butt]

Ah! This makes sense. Thanks so much.

[Karl-André Gagnon]

@Chuck please note that setting multiple timers at once is a bad practice. You should set a timer in a recursive function.

[Chuck Le Butt]

@Karl-AndréGagnon I guess I could clearTimeout the three? Or after each loop?

[Karl-André Gagnon]

@Chuck No no no, it's not about the clear timeout, it is about having 3 timers running at the same time. One that last 500ms, one at 1000ms and one at 1500ms. You should wait until 1 timer finish before triggering the other one, just like that : jsfiddle.net/tsx18ttf

[Chuck Le Butt]

@Karl-AndréGagnon Ah yes, I see your point now. That makes most sense, and is indeed the answer I was looking for. Thanks!

[naz786]

How would you use setInterval on an object method? So in var interval = { }