CODEWITHSUNDEEP
javascript
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7739

Restarting setInterval in javaScript

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

Upvotes: 1

Views: 706

Answers (3)

Alex Wayne
Alex Wayne

Reputation: 187034

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

Upvotes: 1

thejigsaw
thejigsaw

Reputation: 194

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

Upvotes: -2

cmbuckley
cmbuckley

Reputation: 42468

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

Upvotes: 3

Related Questions