Restarting setInterval in javaScript

Question

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
                  "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;

function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
    imageIndex = 0;
}

}

I tried to refactor this question restarting a setInterval, but couldn't get it right. Any help would be appreciated! ***Added context**** Basically I have a bunch of images that cycle through and stop upon clicking them. I'd like to restart the cycling upon clicking again...

var intervalHandle = setInterval(changeImage,5000);

//Basically I want a clearInterval on a click and then restart this changing image    function it.

myImage.onclick = function(){
  clearInterval(intervalHandle);
  intervalHandle = setInterval(changeImage,5000);
};

What isn't right about it? What happens instead of what you expect? — Alex Wayne, Dec 09 '13 at 23:30
A little more context here would be helpful. Why are you starting the interval again having cleared it in the click event? I imagine if I removed the call to set interval in the click event this would work. — Captain John, Dec 09 '13 at 23:32
Try not re-calling the setInterval in the click handler. That'll tell you for sure whether it's working — Adam Rackis, Dec 09 '13 at 23:34
Can you reword `...restart this changing image function it.`. I, for one, cannot understand its meaning. — stackunderflow, Dec 09 '13 at 23:36
@ Alex Actually when I wrote that I didn't realize I am putting two events in one click. I suppose that's the problem? — Antonio Pavicevac-Ortiz, Dec 09 '13 at 23:51
@AntonioOrtiz You can use as much code to handle a click as you want, so no, that's probably not the problem. — Alex Wayne, Dec 09 '13 at 23:58
But isn't that 'click' clearing and then immediately starting the setInterval? I'd like a 'click' to clear everything and then another click to restart the setInterval... — Antonio Pavicevac-Ortiz, Dec 10 '13 at 00:06

score 3 · Answer 1 · edited May 23 '17 at 10:28

I expect the problem is that setInterval doesn't fire immediately, and you're expecting it to call changeImage as soon as you click myImage. The first call to changeImage will be 5 seconds after clicking the image. You could do something like this to call changeImage immediately:

myImage.onclick = function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage, 5000);
    changeImage();
};

Another choice is to do away with intervals entirely (as with this answer) — intervals can queue up when the window isn't focused in some browsers, so you could have changeImage set its own timeouts:

var timeoutHandle = setTimeout(changeImage, 5000);

function changeImage() {
    // ...
    timeoutHandle = setTimeout(changeImage, 5000);
}

myImage.onclick = function () {
    clearTimeout(timeoutHandle);
    changeImage();
};

This seems a likely pitfall. But whether that's what he "couldn't get right" is anyones guess. — Alex Wayne, Dec 09 '13 at 23:41
@AlexWayne yes, it's a bit of a stab in the dark, but hopefully it proves to be of some use :-) — cmbuckley, Dec 09 '13 at 23:46

Alex Wayne · Accepted Answer · 2013-12-10T00:09:43.853

1

Basically I have a bunch of images that cycle through and stop upon clicking them. I'd like to restart the cycling upon clicking again...

Well why didn't you say so? ;)

So you want to start the interval if its not started, and stop it if it is started.

var intervalHandle = setInterval(changeImage, 5000); // start the interval by default
var running = true; // true if the interval is running, false if its not.

myImage.onclick = function(){
  if (running) {
    clearInterval(intervalHandle); // stop interval
    running = false; // mark interval as stopped
  } else {
    intervalHandle = setInterval(changeImage, 5000); // start interval
    running = true; // mark interval as started
    changeImage(); // also change the image right now
  }
};

edited Dec 10 '13 at 00:09

answered Dec 10 '13 at 00:04

Alex Wayne

178,991
47
309
337

Thanks!! \0/ :) Interesting, i see why you initially created the running variable (to use in the conditional? right?). And if 'true' the 'clearInterval' fires. But why assign it to false? Same goes for the 'else'...I see that makes it restarts/calls the changeImage function, but what is the boolean doing there? Thanks again Alex! – Antonio Pavicevac-Ortiz Dec 10 '13 at 00:23
Each click you want to do something different. Sometimes you want to do one thing (start the interval), other times you want to do something else (stop the interval). The boolean variable lets you see what the current state is, and then do the appropriate thing. And wherever else in your script that you want to check if the interval is running, you simply need to check to see if `running` is `true`. – Alex Wayne Dec 10 '13 at 01:20

thejigsaw · Answer 3 · 2013-12-10T00:02:57.030

-2

the only reason why i think this would not work is if you define intervalHandle in a "dom ready" event or some other function so try putting it in global scope rather than defining it.

EDIT: sorry for the first reply it was indeed false beacause i didnt had full information of what you wanted to do so home this will help you

var intervalHandle = setInterval(changeImage,5000);

myImage.onclick = function(){
  if (intervalHandle > -1) {
    clearInterval(intervalHandle);
    intervalHandle = -1;
  } else {
    intervalHandle = setInterval(changeImage,5000);
  }
};

edited Dec 10 '13 at 00:02

answered Dec 09 '13 at 23:38

thejigsaw

194
2
10

2

The variable scope in his example is correct, whether in the global scope or not. Your suggestion to force things into the global scope that shouldn't need it is ill advised. – Alex Wayne Dec 09 '13 at 23:43
sorry for that i saw the question even before it was edited with the full context i edited my anwer – thejigsaw Dec 10 '13 at 00:03

Restarting setInterval in javaScript

3 Answers3