Question

我目前有一个元素，当我''mouseenter'那个元素时，在执行'mouseenter'中的代码之前应该有一个延迟。

我用以下代码实现了这个目标：

$('.element').mouseenter( function() {
    setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
});

所以在这里，在我的输出'鼠标输入'。将被放置，但仅在5秒后。现在，当我的鼠标光标在5秒内移出元素时，不应该执行代码。

我尝试使用以下javascript函数，但它无效：

$('.element').mouseout( function(e) {
    e.stopPropagation();
});

我创建了一个小提琴演示来展示它：

http://jsfiddle.net/836dS/5/

基本上问题是：

“当我的鼠标移出设置了mouseenter的区域时，如何取消我的超时功能中的代码？”

Answer 1

setTimeout和e.stopPropagation()彼此无关。实际上，setTimeout是javascript原生的，你不需要jQuery来调用它。停止计时器的正确方法是将其设置为变量，然后使用clearTimeout

清除它

像这样：

var timer;
$('.element').mouseenter( function() {
    timer = setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
});

$('.element').mouseout( function() {
    clearTimeout(timer);
});

Answer 2

好吧，您可能希望将setTimeout分配给变量，然后调用clearTimeout（）而不是e.stop ...（）。

清除超时应该停止它而不是调用该函数。

编辑：

这是一个很好的例子：enter link description here 我希望它有所帮助！

Answer 3

我会按照这些方针做点什么。使用布尔值来跟踪mous

var window.mouseIn;
$('.element').mouseenter( function() 
{
    window.mouseIn = true; 
    setTimeout(function() 
    {
        if ( window.mouseIn )
        {
            $('#output').append("Mouse enter.</br>");
        }
    },5000);
});

$( '.element' ).mouseout( function)(
{
    window.mouseIn = false;
}

当超时结束时，如果mouseIn为true（意味着他们没有将鼠标移出），那么你将追加。

工作小提琴：http://jsfiddle.net/j08691/836dS/6/

Answer 4

使用clearTimeout()来杀死setTimeout()（并将处理程序链接在一起）：

var clr;
$('.element').mouseenter( function() {
    clr = setTimeout(function() {
        $('#output').append("Mouse enter.</br>");
    },5000);
}).mouseout( function() {
    clearTimeout(clr);
});

<强> jsFiddle example

jQuery - 尝试理解setTimeout函数

4 个答案: