jquery 悬停和 setTimeout/clearTimeOut

Question

我目前正在尝试制作一个带有子菜单的菜单。 这就是我想做的。

将鼠标悬停在链接 (#mylink) 上时，我想在其正下方显示一个 div(我们称其为“#submenu”)。 鼠标离开此链接后 5 秒后想要执行某个功能。

在这 5 秒的时间间隔内，如果我将鼠标悬停在 div (#submenu) 上，我想清除超时。 所以这个div不会在5秒后消失。

这是我的代码:

$(document).ready(function()
{
    $("#mylink").hover(
        function ()
        {
            $('#submenu').show();
        },
        function()
        {
            var timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#submenu').show();
        }
    );
}

Answer 1

SLaks 有正确的答案，但为了详细说明，您可以将 var time 放在函数处理程序之外。请注意，此示例并未使 timer 成为全局变量 - 它只是扩大了其范围，以便所有处理程序都可以使用它。

$(document).ready(function(){
    var timer;
    $("#mylink").hover(
        function(){
            $('#submenu').show();
        }, function(){
            timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function(){
            clearTimeout(timer);
        }, function(){
            $('#submenu').show();
        }
    );
}