By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,918 Members | 1,852 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,918 IT Pros & Developers. It's quick & easy.

stopping setInterval()

P: 21
i'm making a javascript visualization effect, and i'm having some trouble with the stopping the main function when a certain particle reaches 100% height:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=ISO-8859-1"
  5.  http-equiv="content-type">
  6.   <title>$P4rk5</title>
  7.   <script>
  8. function fetchById(id){
  9. if (document.getElementById){
  10. var fetch = document.getElementById(id);
  11. }
  12. else if (document.layers){
  13. var fetch = document.layers[id];
  14. }
  15. else if (document.all){
  16. var fetch = document.all[id];
  17. }
  18. return fetch;
  19. }
  20. function main(id){
  21. position = new Array();
  22. position[0] = parseFloat(fetchById(id).style.left);
  23. position[1] = parseFloat(fetchById(id).style.bottom);
  24. position[1] = position[1] + 4;
  25. fetchById(id).style.bottom = position[1] + "%";
  26. fetchById(id).style.opacity = parseFloat(fetchById(id).style.opacity) - .04;
  27. if(parseFloat(fetchById(id).style.left) < 50){
  28. fetchById(id).style.left = parseFloat(fetchById(id).style.left) + 2 + "%";
  29. }
  30. else{
  31. fetchById(id).style.left = parseFloat(fetchById(id).style.left) - 2 + "%";
  32. }
  33. if(position[1] < 100){
  34. setInterval("main('p" + x + "')", 0);
  35. }
  36. }
  37.   </script>
  38. </head>
  39. <body
  40.  style="color: rgb(51, 204, 255); background-color: rgb(0, 0, 0); height: 100%; overflow: hidden;"
  41.  alink="#3366ff" link="#3366ff" vlink="#3366ff">
  42. <div id="container">
  43. </div>
  44. <script>
  45. x = 0;
  46. y = 10;
  47. function create(){
  48. while(x < y){
  49. style = "z-index: " + Math.floor(Math.random()*100) + "; position: absolute; bottom: -10px; left: " + Math.floor(Math.random()*100) + "%; opacity: 1;";
  50. image = document.createElement('img');
  51. image.setAttribute('style', style);
  52. image.setAttribute('alt', 'p');
  53. image.setAttribute('src', 'particle.png');
  54. image.setAttribute('id', 'p' + x);
  55. fetchById('container').appendChild(image);
  56. setInterval("main('p" + x + "')", 1);
  57. x = x + 1;
  58. }
  59. y = y + 10;
  60. setTimeout("create()",500)
  61. }
  62. create()
  63. </script>
  64. </body>
  65. </html>
  66.  
here is a demo: nowpct.awardspace.com/sparks.php

thanks!
Jun 25 '07 #1
Share this Question
Share on Google+
6 Replies


P: 21
sorry, i forgot to specify that i need to stop the setInterval("main('p" + x + "')", 1); function once that specific particle reaches 100% height

also, disregard the:
Expand|Select|Wrap|Line Numbers
  1. if(position[1] < 100){
  2. setInterval("main('p" + x + "')", 0);
  3. }
  4.  
in the main function, it's been taken out.
Jun 25 '07 #2

eboyjr14
P: 27
When you call setInterval(), save the returned number. (let's say it is setVar )

Then you would call clearInterval( setVar ); to stop it.
Jun 26 '07 #3

P: 21
is there a way to stop a setInterval after you've called it?
Jun 27 '07 #4

P: 21
thanks a ton!!!!! i never would've found that! i'll update the demo soon to show the finished product
Jun 27 '07 #5

gits
Expert Mod 5K+
P: 5,371
hi ...

of course ;) have a look:

Expand|Select|Wrap|Line Numbers
  1. var interval = window.setInterval(func_ref, milliseconds);
  2.  
  3. // stop the interval - the above variable holds the reference to it
  4. window.clearInterval(interval);
kind regards ...
Jun 27 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Merged threads.
Jun 27 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.