Javascript stop function problem

the way you are using clearInterval is not correct.
its should be something like this:

var t; //to start t=setTimeout("someFunction()",1000); //to stop clearTimeout(t);

for more information in this, just see:
http://www.w3schools.com/js/js_timing.asp

the way you are using clearInterval is not correct.
its should be something like this:

var t; //to start t=setTimeout("someFunction()",1000); //to stop clearTimeout(t);

for more information in this, just see:
http://www.w3schools.com/js/js_timing.asp

Thank YOU so much for quick reply! it worked... the only thing is, IT DOES work in Mozilla but not in IE....it driving me banans

Tatyana,

Javascript allows arrays to have properties and methods in addition to their normal elements [0], [1], [2] etc.

Hence we can define all the functions associated with the breakdance animation as methods of a breakdance array, which also holds all the preloaded images. Each function is fairly simple.

This approach exposes just one variable (breakdance) to the global namespace.

If you wanted two or more animations on the same page, then it would be a fairly small step to convert the code into a reusable prototype (class) such that you could avoid duplicating everything for each animation.

var breakdance = [];//New Array breakdance.allow = false;//This allows/disallows image rotation. breakdance.numb = 0;//Counter. breakdance.tim = null;//Opaque setTimeout variable. breakdance.img = null;//The <img> element in which the animation will show. breakdance.delay = 500;//Default animation delay (can be overridden with .setDelay() method). breakdance.imgturn = function(){//Function that performs the animation. if (document.images && breakdance.img){ breakdance.img.src = breakdance[breakdance.numb].src; breakdance.numb = ++breakdance.numb % breakdance.length;//Increment counter, with wrap-around back to 0. clearTimeout(breakdance.tim);//In case there's already another timeout in waiting. if(breakdance.allow) { breakdance.tim = setTimeout('breakdance.imgturn()', breakdance.delay); }//Call breakdance.imgturn() again after delay. } }; breakdance.start = function(){//Start the animation breakdance.allow = true;//Allow it. breakdance.imgturn();//Start it. }; breakdance.stop = function(){//Stop the animation clearTimeout(breakdance.tim);//Clear any timeout currently in waiting breakdance.allow = false; }; breakdance.rewind = function(){ breakdance.stop();//Stop the animation breakdance.numb = 0;//Reset counter to zero breakdance.imgturn();//Show the first image in the rotation. }; breakdance.setImg = function(id){ if(!id) { return; } breakdance.img = document.getElementById(id);//Set id of required <img> element if(!breakdance.img) { alert('img id=' + id + ' not found on the page'); } }; breakdance.setDelay = function(x){//Set animation delay in milliseconds breakdance.delay = Number(x); }; breakdance.preload = function(n, prefix, suffix){ if(!n){ return; } prefix = (!prefix) ? '' : prefix; suffix = (!suffix) ? '.gif' : suffix; if (document.images){ for(var i=0; i<n; i++){ breakdance[i] = new Image(); breakdance[i].src = prefix + (i+1) + suffix;//Preload images into breakdance array. } } }; onload = function(){//A function which executes when the page has loaded, initialising breakdance. //As far as possible we control the behaviour here rather than "hard code" it in the methods. breakdance.preload(8, 'images/breakdance', '.gif');//preload images breakdance.setDelay(250);//override hardcoded default. breakdance.setImg('demo'); breakdance.rewind(); }

<img id="demo" src="images/breakdance1.gif" /> <form action=""> <p> <input type="button" value="Rewind" onclick="breakdance.rewind();"/> <input type="button" value="Start" onclick="breakdance.start();"/> <input type="button" value="Stop" onclick="breakdance.stop()"/> </p> </form>

This should work in all modern browsers.

It will take a bit of time to get your mind round this but it will be worthwhile in the longrun. Your javascript will improve by learning fom other people's code.

Lastly, there are many other good javascript solutions to this problem. This is just one.

Airshow