clearTimeout的问题

Question

我正在尝试建立一个简单的导航下拉子导航。所需的功能是，如果未通过鼠标输入，下拉列表将在一定的秒数后隐藏自身。不过，如果它当前处于悬停状态，我希望使用clearTimeout，这样当鼠标在它里面时，它就不会隐藏起来。

    function hideNav() {
        $('.subnav').hover(function(){
            clearTimeout(t);
        }, function() {
            $(this).hide();
        });
}

$('#nav li').mouseover(function() {
    t = setTimeout(function() { $('.active').hide()}, 4000);
    //var liTarget = $(this).attr('id');
    $('.active').hide();
    $('.subnav', this).show().addClass('active');
    navTimer;
    hideNav();
});

我遗漏了什么？我是不是传递了错误的句柄？

Answer 1

在设置新的超时之前，您还应该清除鼠标悬停中的超时。

否则，之前启动的超时将仍然有效，但不再可以通过t变量访问。

Answer 2

您可以将定时器变量设置为全局变量。

function hideNav() {
  $('.subnav').hover(function(){
    clearTimeout(window.t);
  }
}

$('#nav li').mouseover(function() {
  window.t = setTimeout(function() { $('.active').hide()}, 4000);
});

Answer 3

尝试使用推荐的方法(字符串形式的JS语句)：

t = setTimeout("$('.active').hide()", 4000);