homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
using setTimeout
variable not defined?
AnonyMouse

10+ Year Member



 
Msg#: 3927177 posted 10:45 am on Jun 5, 2009 (gmt 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]

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3927177 posted 2:29 pm on Jun 5, 2009 (gmt 0)

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]

astupidname

5+ Year Member



 
Msg#: 3927177 posted 3:20 pm on Jun 5, 2009 (gmt 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]

AnonyMouse

10+ Year Member



 
Msg#: 3927177 posted 10:55 am on Jun 6, 2009 (gmt 0)

Thanks for both of your replies, much appreciated. I'll try them out over the weekend.

AnonyMouse

10+ Year Member



 
Msg#: 3927177 posted 11:41 am on Jun 8, 2009 (gmt 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]

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3927177 posted 1:29 pm on Jun 8, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved