Javascript stop function problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Nov 2009
Posts: 5
Reputation: tatyana84 is an unknown quantity at this point 
Solved Threads: 0
tatyana84's Avatar
tatyana84 tatyana84 is offline Offline
Newbie Poster

Javascript stop function problem

 
0
  #1
Nov 4th, 2009
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!


html Syntax (Toggle Plain Text) 
  1. <script language="JavaScript">
  2.  
  3.     // Preloaded images
  4.  
  5.     if (document.images)
  6.  
  7.     { 
  8.  
  9.       demo1 = new Image();
  10.  
  11.       demo1.src = "images/breakdance1.gif"
  12.  
  13.  
  14.  
  15.       demo2 = new Image();
  16.  
  17.       demo2.src = "images/breakdance2.gif";
  18.  
  19.  
  20.  
  21.       demo3 = new Image();
  22.  
  23.       demo3.src = "images/breakdance3.gif";
  24.  
  25.  
  26.       demo4 = new Image();
  27.  
  28.       demo4.src = "images/breakdance4.gif"
  29.  
  30.  
  31.       demo5 = new Image();
  32.  
  33.       demo5.src = "images/breakdance5.gif"
  34.  
  35.  
  36.       demo6 = new Image();
  37.  
  38.       demo6.src = "images/breakdance6.gif"
  39.  
  40.  
  41.       demo7 = new Image();
  42.  
  43.       demo7.src = "images/breakdance7.gif"
  44.  
  45.  
  46.       demo8 = new Image();
  47.  
  48.       demo8.src = "images/breakdance8.gif"
  49.  
  50.     }
  51.  
  52.     // Reusable timer
  53.  
  54.     function timeimgs(numb)
  55.  
  56.     { 
  57.  
  58.       thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
  59.  
  60.     }
  61.  
  62.     // Reusable image turner
  63.  
  64.     function imgturn(numb)
  65.  
  66.     { 
  67.  
  68.       if (document.images)
  69.  
  70.       {
  71.  
  72.         // This will loop the image
  73.  
  74.         if (numb == "8") 
  75.  
  76.         { 
  77.  
  78.           document["demo"].src = eval("demo8.src");
  79.  
  80.           timeimgs('1');
  81.  
  82.         }
  83.  
  84.         else
  85.  
  86.         { 
  87.  
  88.           document["demo"].src = eval("demo" + numb + ".src");
  89.  
  90.           timeimgs(numb = ++numb);
  91.  
  92.         }
  93.  
  94.       }
  95.  
  96.     }
  97.  
  98.     </script>
  99. <body>
  100.  
  101.    <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>
  102. </body>
Last edited by peter_budo; Nov 5th, 2009 at 7:15 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 483
Reputation: DangerDev has a spectacular aura about DangerDev has a spectacular aura about 
Solved Threads: 59
DangerDev's Avatar
DangerDev DangerDev is offline Offline
Posting Pro in Training
 
1
  #2
Nov 5th, 2009
the way you are using clearInterval is not correct.
its should be something like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var t;
  2. //to start
  3. t=setTimeout("someFunction()",1000);
  4. //to stop
  5. clearTimeout(t);
for more information in this, just see:
http://www.w3schools.com/js/js_timing.asp
Freedom in the Mind, Faith in the words.. Pride in our Souls...
Indian Developer
http://falaque.wordpress.com/
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2009
Posts: 5
Reputation: tatyana84 is an unknown quantity at this point 
Solved Threads: 0
tatyana84's Avatar
tatyana84 tatyana84 is offline Offline
Newbie Poster

YES

 
0
  #3
Nov 5th, 2009
•
•
•
•
Originally Posted by DangerDev View Post
the way you are using clearInterval is not correct.
its should be something like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var t;
  2. //to start
  3. t=setTimeout("someFunction()",1000);
  4. //to stop
  5. 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
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark
 
0
  #4
Nov 5th, 2009
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.
javascript Syntax (Toggle Plain Text) 
  1. var breakdance = [];//New Array
  2. breakdance.allow = false;//This allows/disallows image rotation.
  3. breakdance.numb = 0;//Counter.
  4. breakdance.tim = null;//Opaque setTimeout variable.
  5. breakdance.img = null;//The <img> element in which the animation will show.
  6. breakdance.delay = 500;//Default animation delay (can be overridden with .setDelay() method).
  7. breakdance.imgturn = function(){//Function that performs the animation.
  8. 	if (document.images && breakdance.img){
  9. 		breakdance.img.src = breakdance[breakdance.numb].src;
  10. 		breakdance.numb = ++breakdance.numb % breakdance.length;//Increment counter, with wrap-around back to 0.
  11. 		clearTimeout(breakdance.tim);//In case there's already another timeout in waiting.
  12. 		if(breakdance.allow) { breakdance.tim = setTimeout('breakdance.imgturn()', breakdance.delay); }//Call breakdance.imgturn() again after delay.
  13. 	}
  14. };
  15. breakdance.start = function(){//Start the animation
  16. 	breakdance.allow = true;//Allow it.
  17. 	breakdance.imgturn();//Start it.
  18. };
  19. breakdance.stop = function(){//Stop the animation
  20. 	clearTimeout(breakdance.tim);//Clear any timeout currently in waiting
  21. 	breakdance.allow = false;
  22. };
  23. breakdance.rewind = function(){
  24. 	breakdance.stop();//Stop the animation
  25. 	breakdance.numb = 0;//Reset counter to zero
  26. 	breakdance.imgturn();//Show the first image in the rotation.
  27. };
  28. breakdance.setImg = function(id){
  29. 	if(!id) { return; }
  30. 	breakdance.img = document.getElementById(id);//Set id of required <img> element
  31. 	if(!breakdance.img) { alert('img id=' + id + ' not found on the page'); }
  32. };
  33. breakdance.setDelay = function(x){//Set animation delay in milliseconds
  34. 	breakdance.delay = Number(x);
  35. };
  36. breakdance.preload = function(n, prefix, suffix){
  37. 	if(!n){ return; }
  38. 	prefix = (!prefix) ? '' : prefix;
  39. 	suffix = (!suffix) ? '.gif' : suffix;
  40. 	if (document.images){
  41. 		for(var i=0; i<n; i++){
  42. 			breakdance[i] = new Image();
  43. 			breakdance[i].src = prefix + (i+1) + suffix;//Preload images into breakdance array.
  44. 		}
  45. 	}
  46. };
  47. onload = function(){//A function which executes when the page has loaded, initialising breakdance.
  48. 	//As far as possible we control the behaviour here rather than "hard code" it in the methods.
  49. 	breakdance.preload(8, 'images/breakdance', '.gif');//preload images
  50. 	breakdance.setDelay(250);//override hardcoded default.
  51. 	breakdance.setImg('demo');
  52. 	breakdance.rewind();
  53. }
html Syntax (Toggle Plain Text) 
  1. <img id="demo" src="images/breakdance1.gif" />
  2. <form action="">
  3. <p>
  4. <input type="button" value="Rewind" onclick="breakdance.rewind();"/>
  5. <input type="button" value="Start" onclick="breakdance.start();"/>
  6. <input type="button" value="Stop" onclick="breakdance.stop()"/>
  7. </p>
  8. </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
Last edited by Airshow; Nov 5th, 2009 at 6:58 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 422 | Replies: 3
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captchaformproblem checkbox child class close codes date debugger dependent developer disablefirebug dom editor element embed engine events explorer ext file flash form forms game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe internet java javascript javascripthelp2020 jquery jsf jsfile jump libcurl maps margin marquee masterpage math matrixcaptcha media mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming rated redirect runtime safari scriptlets scroll search security session shopping size software solutions sources star stars stretch synchronous toggle tweet unicode variables web webkit webservice window wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC