Jump to content

setInterval() behaves strangely


nhuyvan1106

Recommended Posts

<!DOCTYPE hmtl><html lang = "en-US">    <head>	<meta charset = "UTF-8">	<script type = "text/javascript">	    window.onload = myFunction;            var i = 11;	    function myFunction() {		document.getElementById("output").innerHTML = display();		setTimeout(myFunction, 1000);	    }				    function display() {		 i--;		 var prompting;		 if (i == 0) {		    i = 10;		    prompting = confirm("Do you want to go?");		    if (prompting == true) {			window.location = "http://www.google.com";		    }		 }		 return "You will be re-directed in " + i;	    }			        </script>	</head>		<body>	    <div id = "output"></div>	</body></html>

Hi guys, I just made this little countdown clock, but one thing is really confusing me, the setTimeout() function up there, it works fine, but whenever I replace it with setInterval(), the variable i doesn't step down by every 1 unit at all, instead, it goes like, 9 ....7....3, but when I use setTimeout(), it goes 10..9..8.. till 0. You guys know why? Thank you very much.

Link to comment
Share on other sites

Perhaps someone else may go into the details as to why that happens with setInterval but here is a way how to use setInterval to get the same results like how you did with setTimeout:

<!DOCTYPE hmtl><html lang = "en-US">    <head><meta charset = "UTF-8"><script type = "text/javascript">   window.onload = myFunction;      var i = 11;      var clearT;      function myFunction()       {         //document.getElementById("output").innerHTML = display();         clearT = setInterval(display, 1000);       }   function display()    {       i--;       var prompting;       if (i < 0) // less than 0 so that 0 can be displayed when count down done       {           i = 11; // set to 11 like above so countdown displays 10          prompting = confirm("Do you want to go?");          if (prompting == true)           {             clearInterval(clearT);             window.location = "http://www.google.com";          }       }       else       {          //return "You will be re-directed in " + i;          document.getElementById("output").innerHTML = "You will be re-directed in " + i;       }   }        </script></head><body>   <div id = "output"></div></body></html>
Link to comment
Share on other sites

You're supposed to only call setInterval once (outside myFunction), and it'll keep looping on its own.By using a loop you are ordering it to run an extra time each second. Once for the 1st second, twice (1 from last turn + 1 new one) for the 2nd, and four (2 already running + 2 new ones) times for the 3rd. You're practically telling the loop to copy itself and run the copy too on the next iteration this is really bad, as for n seconds, it has to exponentially run myFunction a total number of times [2^n-1]. so 11 seconds goes by and myFunction will run 2,047 times, not 11 as you're expecting furthermore, you have no terminator here, so even though on the surface the program seems to have stopped, under the hood its still exponentially calling myfunction more and more times. Set "setInterval()" to a variable so that when you want to terminate the loop (if your prompting was false), you have something to to give to "clearInterval()".

var intervalId;var output;var i = 11;  window.onload = funtion(){    output = document.getElementById("output");    intervalId = setInterval(display,1000);  } 			  function display() {    i--;    var prompting;    if (i == 0) {      i = 10;      prompting = confirm("Do you want to go?");      if (prompting == true) {        clearInterval(intervalId);        window.location = "http://www.google.com";       }    }    output.innerHTML = "You will be re-directed in " + i;   }
Link to comment
Share on other sites

Oh yeah, mannnnnnnnnn, that makes alot of sense, because setInterval() doesn't cancel itself out like setTimeout() does, so it will keep calling itself multiple times during 1-second interval really lightning-fast, that is why the number appears to be skipping over, man, thanks alot for saving me a headache. :good:

Link to comment
Share on other sites

it's not that it cancels itself, it's just how it's supposed to work. setTimeout runs once, setInterval runs each x milliseconds.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...