Question

我正在使用嵌套菜单，当我的鼠标移动到某个选项上时，会显示一个子列表。这是我的悬停功能：

$( ".sublist" ).parent().hover( function () {
    $(this).toggleClass("li_hover",300); //use to change the background color
    $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});

现在，我希望在子列表出现之前添加一段时间，以防止疯狂的鼠标从用户移动。有人对此提出了很好的建议吗？

更新

谢谢你们，我对我的程序做了一些改动，最近它看起来像这样：

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        setTimeout(doSomething_hover($(this)), 3000);
    });
}):

这很奇怪，setTimeout不会延迟任何事情。但如果我将函数调用更改为doSomething_hover（没有“（）”），该函数将延迟良好。但是我无法将任何jquery元素传递给函数，所以它仍然不起作用，有人可以告诉我如何让doSomething_hover($(this))在setTimeout中工作吗？

更新2：得到setTimeout工作，但它似乎不是我想要的：如果鼠标悬停在小于0.5秒的选项上，我真正想要的是什么都不会发生。

无论如何，这是我使setTimeout工作的代码：

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        var e = $(this);
        setTimeout(function () { doSomething_hover(e); }, 1000);
    });
}):

最后更新：当我将鼠标移出时，我通过使用clearTimeout完成了这项工作。所以代码应该是：

    $( ".sublist" ).parent().mouseover( function () {
        var e = $(this);
        this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
    });

    $( ".sublist" ).parent().mouseout ( function () {
        if(this.timer){
            clearTimeout(this.timer);
        }
        if($(this).hasClass("li_hover")){
            $(this).toggleClass("li_hover");
        }
        $(this).find(".sublist").hide("slide", {}, 500);

    });

这是$(document).ready()中的部分。其他代码与上述相同。

真。最后更新：因此，mouseover和mouseout会在某个时候导致错误，因为当我将鼠标移动到子列表时，父项的mouseover事件将会触发，并隐藏子列表。问题可以通过使用hover函数来解决：

    $( ".sublist" ).parent().hover( 
        function () {
            var e = $(this);
            this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
        },
        function () {
            if(this.timer){
                clearTimeout(this.timer);
            }
            $(this).find(".sublist").hide("slide", {}, 500);
            if($(this).hasClass("li_hover")){
                $(this).toggleClass("li_hover",300);
            }
        }
    );

全部谢谢

Answer 1

timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);

jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});

参考link

function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );

...

Answer 2

您可以使用.setTimeout

$(".sublist").parent().hover(function() {
    setTimeout(function() {
        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    }, 1000);
});

Answer 3

请试试这个：

<强>代码

setInterval(doSomthing_hover, 1000);


function doSomthing_hover() {
    $(".sublist").parent().hover(function() {

        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    });

}

SetTime vs setInterval

从根本上讲，了解JavaScript定时器的工作原理非常重要。通常，由于它们所处的单线程，它们的行为不直观。让我们首先检查我们可以访问的三个函数，这些函数可以构造和操作定时器。

var id = setTimeout(fn, delay); - 启动一个定时器，在延迟后调用指定的函数。该函数返回一个唯一的ID，可以在以后取消定时器。

var id = setInterval(fn, delay); - 与setTimeout类似，但不断调用函数（每次都有延迟），直到取消。

clearInterval(id);，clearTimeout(id); - 接受计时器ID（由上述任一功能返回）并停止发生计时器回调。

为了理解定时器如何在内部工作，需要探索一个重要的概念：不能保证定时器延迟。由于浏览器中的所有JavaScript都在单个线程上执行，因此异步事件（例如鼠标单击和计时器）仅在执行中打开时运行。

进一步阅读： http://ejohn.org/blog/how-javascript-timers-work/

如何在执行悬停功能之前添加等待时间

3 个答案: