Javascript stop function problem

Question

tatyana84 0 Newbie Poster

15 Years Ago

Hi!
of cause, you already know, i'm gonna say im new to javascript and blahblahblah.... anyway, its a simple changing images animation starting by clicking on button. However, i stuck on stopping animation by clicking "stop" button.... here is my code, please if somebody can take time to look at it, i would really appreciate it!

<script language="JavaScript">

    // Preloaded images

    if (document.images)

    { 

      demo1 = new Image();

      demo1.src = "images/breakdance1.gif"

 

      demo2 = new Image();

      demo2.src = "images/breakdance2.gif";

 

      demo3 = new Image();

      demo3.src = "images/breakdance3.gif";


      demo4 = new Image();

      demo4.src = "images/breakdance4.gif"


      demo5 = new Image();

      demo5.src = "images/breakdance5.gif"


      demo6 = new Image();

      demo6.src = "images/breakdance6.gif"


      demo7 = new Image();

      demo7.src = "images/breakdance7.gif"


      demo8 = new Image();

      demo8.src = "images/breakdance8.gif"

    }

    // Reusable timer

    function timeimgs(numb)

    { 

      thetimer = setTimeout("imgturn('" +numb+ "')", 1000);

    }

    // Reusable image turner

    function imgturn(numb)

    { 

      if (document.images)

      {

        // This will loop the image

        if (numb == "8") 

        { 

          document["demo"].src = eval("demo8.src");

          timeimgs('1');

        }

        else

        { 

          document["demo"].src = eval("demo" + numb + ".src");

          timeimgs(numb = ++numb);

        }

      }

    }

    </script>
<body>

   <img src="images/breakdance1.gif" name="demo"/> <form action=""><p> <input type="button" value="Watch this lesson" onclick="timeimgs('2');"/><input type="button" value="stop" onclick="clearInterval(timeimgs);"/>  </p></form>
</body>

javascript

Edited 15 Years Ago by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

3 Contributors
3 Replies
274 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

DangerDev 107 Posting Pro in Training

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tatyana84 0 Newbie Poster · Answer 1 · 2009-11-06T02:02:58+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2009-11-06T04:53:22+00:00

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