setTimeout

[David]

Hi,

I'm trying to set a delay for an onmouseout function on a simple list menu.
I don't understand why the code below doesn't work. If on the onmouseout I
use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
missing here?



var myFunction = function() {
var d = document.all;
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=function() {
this.className="show";
}
lis.onmouseout=function() {
//this.className="hide";
doTimeout(this);
}
}
}

function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);
}

function hideElement(el){
el.className="hide";
}
window.onload = myFunction;


Thanks, David

 

[Lee]

David said:

Hi,

I'm trying to set a delay for an onmouseout function on a simple list menu.
I don't understand why the code below doesn't work. If on the onmouseout I
use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
missing here?

function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);
}

In this function, el is a reference to some element object.
The string concatenation operator works only on strings.
The Javascript engine fixes this for you by automatically invoking
el.toString() and concatenating the result into the string for you.

I don't know, off the top of my head, what that might look like, but
whatever it is, it's a string, so you can't refer to it later in your
hideElement() function as if it was still an object reference.


--

 

[Evertjan.]

David wrote on 19 mei 2007 in comp.lang.javascript:

doTimeout(this);
}
}
}

function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);
}

Object pointers will ber converted to a string as [object],
methinks.

This probably will result in:

timeout = setTimeout('hideElement([object])',2000);

which would try to execute after two seconds the string
'hideElement([object])'
which cannot be parsed by the js engine.

 

[Daz]

Hi,

I'm trying to set a delay for an onmouseout function on a simple list menu.
I don't understand why the code below doesn't work. If on the onmouseout I
use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
missing here?

var myFunction = function() {
var d = document.all;
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=function() {
this.className="show";
}
lis.onmouseout=function() {
//this.className="hide";
doTimeout(this);
}
}

}

function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);

}

function hideElement(el){
el.className="hide";}

window.onload = myFunction;

Thanks, David

Not entirely sure what's going on. But here is you code, with a little
less text, using a closure. I think that "this", doesn't exist within
the scope of the setTimeout, which is why a closure is needed, but
don't quote me on that. If anyone can offer a better explanation, I'd
appreciate it. I just kinda hacked it until it worked.


var myFunction = function() {
var d = document.all;
var lis =
document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=function() {
this.className="show";
}
lis.onmouseout=function() {
var self = this;
setTimeout(
function(){
self.className="hide";
}, 2000
);
}
}
}
window.onload = myFunction;

Please excuse the dodgy indentation. I tried to get it to fit
correctly in this page.

 

[David]

Not entirely sure what's going on. But here is you code, with a little

less text, using a closure. I think that "this", doesn't exist within
the scope of the setTimeout, which is why a closure is needed, but
don't quote me on that. If anyone can offer a better explanation, I'd
appreciate it. I just kinda hacked it until it worked.


var myFunction = function() {
var d = document.all;
var lis =
document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=function() {
this.className="show";
}
lis.onmouseout=function() {
var self = this;
setTimeout(
function(){
self.className="hide";
}, 2000
);
}
}
}
window.onload = myFunction;

Please excuse the dodgy indentation. I tried to get it to fit
correctly in this page.

Yes, that does work, sort of. It also initiates the timeout on the other
elemenets where it shouldn't. I think an id reference needs to be added to
avoid this although I was trying to avoid using id's. It's a step in the
right direction though.

David

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>

timeout = setTimeout('hideElement([object])',2000);

which would try to execute after two seconds the string
'hideElement([object])'
which cannot be parsed by the js engine.

Nothing AFAICS intrinsically wrong with executing that string, except
for the effect being unlikely to be as hoped for.

function hideElement(X) { alert(X) }
object = 4
hideElement([object])

alerts 4. It even works, for me, with Object.

 

[David]

The difference is that in Evertjan's code [object] refers to an Object in
the page itself.

Placing an eval on it should take care of the string wouldn't it?

eval("timeout" + this + " = window.setTimeout('hideElement( \"" + this +
"\" )', " + 2000 + " );");

David

 

[David]

Placing an eval on it should take care of the string wouldn't it?

eval("timeout" + this + " = window.setTimeout('hideElement( \"" + this +
"\" )', " + 2000 + " );");

Apologies, a correction:

eval("timeout=setTimeout('hideElement( \"" + this + "\" )', " + 2000 +
" );");


David

 

[Evertjan.]

David wrote on 21 mei 2007 in comp.lang.javascript:

Apologies, a correction:

eval("timeout=setTimeout('hideElement( \"" + this + "\" )', " + 2000 +
" );");

eval() needs a string to evaluate, and you do not give it a string or
something that evaluates to a string before it is used by eval().

Did you test it???????????

eval() is evil.

 

[David]

eval() needs a string to evaluate, and you do not give it a string or
something that evaluates to a string before it is used by eval().

Did you test it???????????

eval() is evil.

lol, it doesn't work, I think I'm just throwing darts and need to think this
through. When I find a good solution I will post it.

David

 

[RobG]

Hi,

I'm trying to set a delay for an onmouseout function on a simple list menu.
I don't understand why the code below doesn't work. If on the onmouseout I
use ( this.className="hide"; ) it hides the sub menu, but if I pass it to
other functions with a setTimeout, it doesn't. Can anyone tell me what I'm
missing here?

As others have said, the way you are calling the function using
setTimeout is incorrect.

var myFunction = function() {
var d = document.all;

I don't understand the point of that. If you want to allow for IE 4,
then do proper feature detection for getElementById with fallback to
document.all if it's supported.


[...]

function doTimeout(el){
timeout = setTimeout('hideElement('+el+')',2000);

Use:

function doTimeout(el){
timeout = setTimeout(function(){hideElement(el)},2000);


That creates a closure back to the doTimeout's el variable so that it
is still available when the timeout runs.