I am trying to make a simple setTimeout, to make a div tag invisible after 2 secon开发者_JAVA百科ds.
The setTimeout function makes the div invisible but irregularly, sometimes immediately and sometimes after 1 sec, and so on.
Here is my code:
function beginTimeOut(){
t = setTimeout(function(){hideSubMenu()},2000);
}
function hideSubMenu(){
var elem;
elem = document.getElementById("ul_navlist1");
elem.style.visibility="hidden";
clearTimeout(t);
}
By the way, t is a global variable. I have tried this too: t = setTimeout("hideSubMenu()",2000); but with the same irregular results.
UPDATE from the OP:
This is the div that contains my menu and submenu. I edited it to be a little bit readable here.
The right_rect is the div that contains the menu and submenu. In this div I call onmouseout to hide the submenu.
<div class="right_rect" onmouseout="beginTimeOut();">
<div class="menu2" >
<ul >
<li onclick="hideOrShow();"><a href="#">item1</a></li>
</ul>
</div>
<div id="ul_navlist1">
<ul >
<li><a href="#">sub_item1</a></li>
</ul>
</div>
</div>
and this is the part of the javascript that I use to perform the hiding and showing process.
function hideOrShow(){
var hOrV;
var elem;
var styleType = "visibility";
elem = document.getElementById("ul_navlist1");
hOrV = getStyle(elem, styleType);
if(hOrV =="hidden"){
//alert();
elem.style.visibility="visible";
}else{
elem.style.visibility="hidden";
}
}
function beginTimeOut(){
setTimeout(function(){document.getElementById("ul_navlist1").style.visibility="hidden";}, 2000);
}
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
The getStyle function is not my code.
You can do this:
function beginTimeOut(){
setTimeout(hideSubMenu,2000);
}
function hideSubMenu(){
document.getElementById("ul_navlist1").style.visibility="hidden";
}
setTimeout() only runs once, no need to clear it unless you want to stop it from executing before it does. I'm not sure from your question where you're calling beginTimeOut(), but the time at which it's kicked off may vary. I'd do this in a document load event of some sort or at the end of your <body>, depends what else you have running.
As a side note, you could put this in a single statement, like this:
setTimeout(function() {
document.getElementById("ul_navlist1").style.visibility="hidden";
}, 2000);
Because you are clearing the timeout by using a global variable, there's no guarantee that it will be the right timeout that gets cleared. What if you call beginTimeout before the previous timeout completes? As said by Nick Craver, you probably don't need to clear the timeout.
A coding mistake I've seen more than once is code that uses setInterval/setTimeout and the handle gets overwritten, and the interval persists unexpectedly. It's best to capture the interval when it's created using this fairly obtuse code:
var t=setInterval(function(){doStuff(t)},1000)
So that the handle of the firing interval is passed to the handler. This avoids the problem of storing it globally.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论