I believe this has been asked before but no concrete answer has been determined.
On my website http://euphoricsoftware.com/ there is a fancy countdown script to automatically take you to the normal site, as opposed to mobile or low bandwidth. The script works in every browser with <body onload="setTimeout(countDown(8),1000);"> (where 8 is the number to start from) except sometimes in Chrome the countdown doesn’t move and opening the JS console reveals Uncaught ReferenceError: countDown is not defined.
Also on the page is a button which lets you pause and resume the countdown. Resuming calls the countDown() function, too, and even when the undefined error happens onload, if you click the button twice the countdown will work, so it seems to be something to do with onload.
Here’s the code I’ve been using (SO’s code format has stuffed up the spacing a bit):
<html>
<head>
<!-- ... -->
<script type="text/javascript">
var stopRedirect = false;
var back = 0;
function redirect()
{
if (!stopRedirect) {window.location = "home.html";}
}
function countDown(num)
{
if (!stopRedirect)
{
back = num-1;
if (num < 10)
{
document.getElementById("top").innerHTML=num+1;
}
document.getElementById("middle").innerHTML=num;
if (num > 1)
{
document.getElementById("bottom").innerHTML=num-1;
var t = setTimeout("countDown("+(num-1)+")",1000);
}
else
{
document.getElementById("bottom").innerHTML=" ";
document.getElementById("unit").innerHTML=" second ";
var r = setTimeout("redirect()",1000);
}
}
}
function stop()
{
if (!stopRedirect)
{
stopRedirect = true;
document.getElementById("stop").style.display="none";
document.getElementById("start").style.display="block";
}
}
function start()
{
if (stopRedirect)
{
stopRedirect = false;
document.getElementById("stop").style.display="block";
document.getElementById("start").style.display="none";
var c = setTimeout("countDown("+(back)+")",1000);
}
}
</script>
</head>
<body onLoad="setTimeout(countDown(8),1000);">
<!-- ... -->
and you can see the site in action at http://euphoricsoftware.com/
Does anyone know why this is happening? Thanks
I’m not quite sure why you get that error, given that your function is defined in the
<head>and you don’t try to use it until theonloadof the body, but your code does have a problem. This part from youronload="":will, when the
onloadoccurs and the code is run, call thecountDown()function immediately, passing a parameter of8, and then take whatever that function returns and pass it tosetTimeout()to be executed in 1 second’s time. In your case your function doesn’t return a particular value, so in effect you are passingundefinedtosetTimeout().What you want to do is pass
setTimeout()either a function reference or a string.You can’t pass a reference to
countDown()directly at the same time as passing a parameter for that function (at least, not with a syntax ofsetTimeout()that will work in IE), so you would need to wrap it in an anonymous function like this:Or you can use the string format similar to within your
countDown()function body (using single-quotes since theonloadattribute currently uses doubles):Note that the string format is generally frowned upon because it is slower and affects the scope.