CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Nick Nutting
Nick Nutting

Reputation: 37

How do you restate setInterval after clearInterval has already been declared?

I realize there are more than a few answers on here about this but this particular instance has a very individual problem. I need to, on click, replay this png sequence after clearInterval has been used. 

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

var animationArray = ['assets/calvin_hobbes_dance00.png',
                    'assets/calvin_hobbes_dance01.png',
                    'assets/calvin_hobbes_dance02.png',
                    'assets/calvin_hobbes_dance03.png',
                    'assets/calvin_hobbes_dance04.png',
                    'assets/calvin_hobbes_dance05.png',
                    'assets/calvin_hobbes_dance06.png',
                    'assets/calvin_hobbes_dance07.png',
                    'assets/calvin_hobbes_dance08.png',
                    'assets/calvin_hobbes_dance09.png',
                    'assets/calvin_hobbes_dance10.png'];

var animationIndex = 0;

function changeImage () {

  myImage.setAttribute("src", animationArray[animationIndex]);
  animationIndex++;

  if (animationIndex >= animationArray.length) {
    animationIndex = 10;
    clearInterval(intervalHandler);
    }
}

  var intervalHandler =  setInterval(changeImage, 100);

A secondary question, this is merely a code sample. How might I wrap this so I can use it for elements that have animations attached that when upon focus play the animation?

Thank you.

Upvotes: 0

Views: 84

Answers (1)

Cave Johnson
Cave Johnson

Reputation: 6788

Just add an onclick handler to your image. In the onclick handler, reset the animationIndex to 0, call clearInterval to clear the interval if it is running, and call the setInterval function again.

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

var animationArray = ['assets/calvin_hobbes_dance00.png',
                'assets/calvin_hobbes_dance01.png',
                'assets/calvin_hobbes_dance02.png',
                'assets/calvin_hobbes_dance03.png',
                'assets/calvin_hobbes_dance04.png',
                'assets/calvin_hobbes_dance05.png',
                'assets/calvin_hobbes_dance06.png',
                'assets/calvin_hobbes_dance07.png',
                'assets/calvin_hobbes_dance08.png',
                'assets/calvin_hobbes_dance09.png',
                'assets/calvin_hobbes_dance10.png'];

var animationIndex = 0;

function changeImage () {

  myImage.setAttribute("src", animationArray[animationIndex]);
  animationIndex++;

  if (animationIndex >= animationArray.length) {
    animationIndex = 10;
    clearInterval(intervalHandler);
  }
}

myImage.onclick = function() {
  animationIndex = 0;
  clearInterval(intervalHandler);
  intervalHandler =  setInterval(changeImage, 100);
};

var intervalHandler =  setInterval(changeImage, 100);

To answer your secondary question, you might want to consider another approach because this could get kind of messy and be hard to maintain in the future. Consider learning how to do animations using HTML canvas. Here is a tutorial I found showing how you could create multiple animations: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

In fact, I would advise to change your implementation to use the canvas instead.

Upvotes: 1

Related Questions