homepage Welcome to WebmasterWorld Guest from 54.205.99.71
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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




msg:3927179
 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




msg:3927254
 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




msg:3927294
 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




msg:3927782
 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




msg:3928574
 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




msg:3928603
 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