3

我正在尝试制作一个简单的 setTimeout，以使 div 标签在 2 秒后不可见。

setTimeout 函数使 div 不可见但不规则，有时立即显示，有时 1 秒后显示，依此类推。

这是我的代码：

  function beginTimeOut(){

    t = setTimeout(function(){hideSubMenu()},2000);

}

function hideSubMenu(){
    var elem;
    elem = document.getElementById("ul_navlist1");
    elem.style.visibility="hidden";
    clearTimeout(t);

}

顺便说一下，t 是一个全局变量。我也试过这个：t = setTimeout("hideSubMenu()",2000);但结果同样不规则。

来自 OP 的更新：

这是包含我的菜单和子菜单的 div。我在这里对其进行了编辑以使其具有一点可读性。

right_rect 是包含菜单和子菜单的 div。在这个 div 中，我调用 onmouseout 来隐藏子菜单。

<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>

这是我用来执行隐藏和显示过程的 javascript 的一部分。

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;
}

getStyle 函数不是我的代码。

4

2 回答 2

2

你可以这样做：

function beginTimeOut(){
  setTimeout(hideSubMenu,2000);
}

function hideSubMenu(){
  document.getElementById("ul_navlist1").style.visibility="hidden";
}

setTimeout()只运行一次，不需要清除它，除非你想在它执行之前阻止它执行。从你的问题中我不确定你在哪里打电话beginTimeOut()，但它开始的时间可能会有所不同。我会在某种文档load事件中或在您的末尾执行此操作，这<body>取决于您还运行了什么。

作为旁注，您可以将其放在一个语句中，如下所示：

setTimeout(function() {
  document.getElementById("ul_navlist1").style.visibility="hidden";
}, 2000);
于 2010-04-28T23:30:18.113 回答
1

因为您正在使用全局变量来清除超时，所以不能保证会清除正确的超时。如果在前一个超时完成之前调用 beginTimeout 会怎样？正如 Nick Craver 所说，您可能不需要清除超时。

我不止一次看到的一个编码错误是使用 setInterval/setTimeout 并且句柄被覆盖的代码，并且间隔意外地持续存在。最好在使用这个相当钝的代码创建间隔时捕获它：

var t=setInterval(function(){doStuff(t)},1000)

以便将触发间隔的句柄传递给处理程序。这避免了全局存储它的问题。

于 2010-04-28T23:37:35.850 回答