Javascript 单击即可循环浏览动画

从一个图像开始，我有三个动画，我希望它在每次单击图像时循环播放。 我创建了这个开关：

function switcher() {
// counts to 4 then resets to 0
x = x+1
if (x>3) {x = 0}

// Fire OFF
if (x == 0) {
    // animation code ?
}

// Fire LARGE
if (x == 1) {
// animation code ?    
}

// Fire MEDIUM
if (x == 2) {
// animation code ?
}

// Fire SMALL
if (x == 3) {
// animation code ?
}}

1个静态+3个动画状态

我的动画使用了Paul Irish的requestAnimframe多边形填充 然后：

每个动画基本上都是相同的代码，但图像不同。 当我直接测试代码时，它可以工作，但是当我复制到交换机中时，它就不能工作了

我试着用多种方法把它们插入我的交换机，但似乎什么都没用。 有什么建议吗？

---

谢谢大家!

我不清楚您是如何调用switcher（）方法的，但我怀疑问题可能与Javascript处理setTimeout（）的方式有关

请记住，在Javascript中调用setTimeout（）时，脚本本身不会停止，直到超时结束。相反，它会产生一个处理指定超时的进程，然后继续在代码中执行

如果使用一个方法和一个计数器（在调用该方法时持久化的东西）链接动画，这样当调用该方法时，它会执行动画，然后在使用setTimeout（）再次调用自身之前检查计数器是否小于2，则应该是ok

对不起，如果我离开了基地。基于一个重要的假设：您正在使用setTimeout（）调用switcher（）

---

我希望这能有所帮助。

我在过去两周才开始学习javascript，所以我对它还是有点不了解。我尝试将开关状态指向动画函数，但没有成功

/*Fire LARGE*/if（x==1）{animate（）；}

我想不出关于JS的任何其他信息。谢谢，从img的onclick命令调用switcher，以便在单击动画时更改它。

function animate() 
    {   
    setTimeout(function()
        {
        requestAnimFrame( animate );        
        draw();   
        }, 1000 / 2);
    } 

function draw()    
    {   
    flame=document.getElementById('myimage')
    if (flame.src.match("Images/lfire1.png"))
        {
        flame.src="Images/lfire2.png";
        }
    else
        {
        flame.src="Images/lfire1.png";
        }     
    }