在已声明ClearInterval之后，如何重述SetInterval

Question

我意识到这里有很多答案，但是这个特定的实例有一个非常个体的问题。我需要在使用ClearInterval后单击时重播此PNG序列。

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

次要问题，这仅仅是代码样本。我如何包装它，以便可以将其用于包含动画的元素，该动画在焦点播放动画时？

谢谢。

Answer 1

只需在图像中添加一个onclick处理程序即可。在onclick处理程序中，将animationIndex重置为0，请致电clearInterval在运行时清除间隔，然后再次调用setInterval函数。

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

要回答您的次要问题，您可能想考虑另一种方法，因为这可能会变得凌乱，并且将来很难维持。考虑使用HTML帆布学习如何制作动画。这是我发现如何创建多个动画的教程：http：//www.williammalone.com/articles/create-html5-canvas-javascript-sprite-sprite-animation/

实际上，我建议更改您的实现以使用画布。