Apply timeout to function?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Apply timeout to function?

Post by JAB Creations »

Going off this example...

http://www.htmlite.com/JS018.php

I tried applying a timeout so the class would change only after 4 seconds. What am I doing wrong here?
setTimeout("
function changetime(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

",4000);
setTimeout("changetime",4000);

function changetime(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
function changetime(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

setTimeout("changetime",4000);
User avatar
MarK (CZ)
Forum Contributor
Posts: 239
Joined: Tue Apr 13, 2004 12:51 am
Location: Prague (CZ) / Vienna (A)
Contact:

Post by MarK (CZ) »

You can't be breaking the lines in JavaScript strings. Use

Code: Select all

"blah blah "+
"blah blah"
instead

Defining a function in timeout is useless (at least I can't see a reason why to do that).

This should do what you want:

Code: Select all

function changetime(id, newClass)
{
  identity=document.getElementById(id);
  identity.className=newClass;
}

setTimeout("changetime(\"id_of_obj\", \"the_class\")",4000);
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Heh... I always just define an anonymous function:

Code: Select all

function changeIt(id, newClass)
{
    window.setTimeout(function() { document.getElementById(id).className=newClass;  }, 4000);
}
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Thanks though it didn't work, I got this error...
Error: timedchange is not defined
function timedchange(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

setTimeout("changetime(\"id_of_obj\", \"the_class\")",4000);
Some people don't want a lengthy story of why they need something done. This is a timeout on a menu btw.

*EDIT* d11wtq's code produced same error. :?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

JAB Creations wrote:Thanks though it didn't work, I got this error...
Error: timedchange is not defined
function timedchange(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

setTimeout("changetime("id_of_obj", "the_class")",4000);
Some people don't want a lengthy story of why they need something done. This is a timeout on a menu btw.

*EDIT* d11wtq's code produced same error. :?
That usually indicates you have a syntax error elsewhere in your code ;)
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Sweet thanks...but now I have another question! :P
function timedchange(id, newClass)
{
window.setTimeout(function()
{document.getElementById(id).className=newClass;}, 1000);}
My new question is how can I have this NOT execute if the onmouseover action that triggers this does not last for the full second.

The goal of this is to only show the menu if the user is intentionally moving their mouse over (with onmouseover). If they move over and then past the element I don't want this to trigger, but if the onmouseover lasts for a second THEN I want it to trigger. Make sense? Thanks for your help so far! :D
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

JAB Creations wrote:Sweet thanks...but now I have another question! :P
function timedchange(id, newClass)
{
window.setTimeout(function()
{document.getElementById(id).className=newClass;}, 1000);}
My new question is how can I have this NOT execute if the onmouseover action that triggers this does not last for the full second.

The goal of this is to only show the menu if the user is intentionally moving their mouse over (with onmouseover). If they move over and then past the element I don't want this to trigger, but if the onmouseover lasts for a second THEN I want it to trigger. Make sense? Thanks for your help so far! :D
window.clearTimeout();

Code: Select all

var myTimeout;

function timedchange(id, newClass)
{
    myTimeout = window.setTimeout(function() {document.getElementById(id).className=newClass;}, 1000);
}

.... snip .....

<a href="#" onmouseover="timedchange('foo', 'bar');" onmouseout="window.clearTimeout(myTimeout);">
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

You sir, kick some serious ass: thanks!
Post Reply