setTimeout problem

[ginerjm]

Never used it before and after much trial and error and several bad code examples from you-know-where, here I am.

 

Want to display a little countdown on my re-direct page.

 

Set up a counter function and a display-it function.  Counter function is called by "onload="CountDown()" in the "body" tag of my html

 

Here are the functions.

 

var sttime = 5;

function myTimer()
{
document.getElementById('timerbox').innerHTML=sttime+" seconds to go";
sttime = sttime - 1;
return;
}
function CountDown(tm_val)
{
myTimer();
while (sttime >0)
{
	var t=window.setTimeout(myTimer,1000);
}
return;
}

 

Note that the var 'sttime' is global and is used in both functions.

Note also that 'timerbox' is an h2 element in my webpage.

 

The goal is to display the initial value (which works), then to display a reduced value every second after that until the value becomes 0.  What happens is I see a 5 displayed (the starting point) and then a 0 on the next display, and then nothing changes.  Actually I think I'm hanging up my server since response dies after that.

 

Are my functions valid?

[requinix]

First the explanation:

setTimeout will run code after some delay. You have a loop there that checks a condition, and the condition will only change because of myTimer. Except myTimer won't run for a one second, so in that one second you have a loop that's calling setTimeout a countless number of times.

Say your computer is really, really slow, and in that one second setTimeout gets called 10 times (ie, once every .1s). When the second ends, myTimer will be executed the first time (from the first timeout) and sttime=3. Since sttime is not

Finally sttime=0 and the loop ends... except you still have ~10 myTimers left to execute.

 

Now with some more realistic figures: the loop executes 1,000 times in that one second. After a couple calls to myTimer, the loop finally stops and there are still ~1000 myTimers left. All of them try to execute in the next one second.

 

Solution:

window has a setInterval method which runs code once every interval, and keeps going until you cancel it with clearInterval.

function CountDown(tm_val) {
var timerbox = document.getElementById('timerbox');
var interval = null;

var f = function() {
	timerbox.innerHTML = tm_val + " seconds to go";
	tm_val--;
	if (tm_val 	};

f();
interval = window.setInterval(f, 1000);
}
// CountDown(5);

 

Another solution is to call myTimer once, and make it call setTimeout.