切换setInterval动画的开/关

Question

New to js and learning a lot but in all my research I can't get this quite right.
Goal:
1: I have image1
2: when clicked on runs a setinterval function between image2 and image3, animating it.
3: when clicked on again clearinterval and goes to a static image1.

bonus: no audio when static, plays audio when animate.
I get caught on the thirdstep.

onclick function

function clickio() 
{
 element=document.getElementById('myimage')
 if (element.src.match("image2.png","image3.png"))
   {
   clearInterval("animate()");
   element.src="image1.png";
   audiofile.pause();
   }
 else
   {
   audiofile.play();
   setInterval("animate()", 500)
   }
}

Animate function

function startfire()
{
 element=document.getElementById('myimage')
 if (element.src.match("flame1.png"))
   {
   element.src="flame2.png";
   }
 else
   {
   element.src="flame1.png";
   }
}

Example at: Audibreeze

another issue is playing audio via various browsers.
I used the HTML5 <audio> tag but had a fall to <embed> tag that doesn't seem to work.

Answer 1

This should solve your animation problem.

var animInterval = null;

var clickio = function( event ){
    var element = document.getElementById( 'myimage' );
    if( interval ){
        clearInterval( animInterval );
        element.src = "image1.png";
        audiofile.pause();
    }
    else{
        audiofile.play();
        animInterval = setInterval( startfire , 500 );
    }
}

But I have a few suggestions you might wanna take into account.

1. When creating animations it's usually better to use window.requestAnimationFrame if you use HTML5 or a function that mimics that (like this:)

    window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); 

2. Consider preloading the images before you animate them, or even put all images in the same file (sprite) and changing a background position.