Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: open

Message Too Old, No Replies

using setTimeout

variable not defined?

     
10:45 am on Jun 5, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:May 13, 2003
posts: 151
votes: 0


Hi,

I'm a newbie to JavaScript, and would really appreciate some help on getting this to work:

function delayedURL(var1) {
alert(var1);
setTimeout("alert(var1)",1250);
}

<a href="javascript:delayedURL('http://www.example.com');">test</a>

Clicking on "test" results in the first alert being displayed correctly, then the second gives an error "variable var1 not defined".

But it is defined, as it's just been used in the first alert! I'm guessing it's a variable-scope issue?

Many thanks for any help!

[edited by: Fotiman at 1:32 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]

2:29 pm on June 5, 2009 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


Hi there AnonyMouse,

this is how I would approach the problem...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">

function init() {
document.getElementById('mylink').onclick=function(){
delayedURL(this);
return false;
}
}

function delayedURL(var1) {
alert(var1);
temp=var1;
setTimeout('delayedURL(temp)',3000);
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div>
<a id="mylink" href="http://www.example.com">test</a>
</div>

</body>
</html>


birdbrain

[edited by: Fotiman at 1:31 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]

3:20 pm on June 5, 2009 (gmt 0)

Preferred Member

5+ Year Member

joined:Aug 18, 2008
posts:408
votes: 0


Never quote the contents of a setTimeout or setInterval's code to be run, it is slower, as the string compiler needs to start up to evaluate the string -along with accessing DOM elements these are the slowest parts of javascript. It is best when you need to pass arguments to use an anonymous function instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">

var foo; //an id for the setTimeout to stop it later

function delayedURL(var1) {
alert(var1);
foo = window.setTimeout(function () { delayedURL(var1); },4000);
return false;
}

</script>
</head>
<body>
<div>
<a href="#" onclick="return delayedURL('http://www.example.com');">test</a>
&emsp;<a href="#" onclick="window.clearTimeout(foo); return false;">stop test</a>
</div>
</body>
</html>

[edited by: Fotiman at 1:30 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]

10:55 am on June 6, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:May 13, 2003
posts:151
votes: 0


Thanks for both of your replies, much appreciated. I'll try them out over the weekend.
11:41 am on June 8, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:May 13, 2003
posts:151
votes: 0


Damn, I'd hoped that with your examples I'd be able to figure out what I really want to do, which is a delayed change in the current location:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">

function delayedURL(var1) {
setTimeout(location.href=var1,4000);
return false;
}

</script>
</head>
<body>
<div>
<a href="#" onclick="return delayedURL('http://www.example.com');">test</a>
</div>
</body>
</html>

The above gives a syntax error then does the redirect, but not the delay :-(

[edited by: Fotiman at 1:30 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]

1:29 pm on June 8, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function delayedURL(var1) {
setTimeout(function(){location.href=var1;},4000);
return false;
}
</script>
</head>
<body>
<div>
<a href="http://www.example.com" onclick="return delayedURL(this.href);">test</a>
</div>
</body>
</html>

Note the following changes:
1. I corrected your link to include the real URL in the href. This will allow users with JavaScript disabled to use your link.
2. setTimeout takes a function as the first parameter, where you were trying to pass an assignment. Also, because it was an assignment, it executes as soon as it's encountered, which is why the redirect still happened, but then you're essentially passing the location.href where setTimeout is expecting a function. So I wrapped that assignment in an anonymous function. setTimeout executes the function 4 seconds later, which sets the location.href.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members