nhuyvan1106 Posted July 10, 2014 Share Posted July 10, 2014 <!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 More sharing options...
Don E Posted July 10, 2014 Share Posted July 10, 2014 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 More sharing options...
Hadien Posted July 10, 2014 Share Posted July 10, 2014 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 More sharing options...
nhuyvan1106 Posted July 11, 2014 Author Share Posted July 11, 2014 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. Link to comment Share on other sites More sharing options...
thescientist Posted July 11, 2014 Share Posted July 11, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now