Question

使用SetTimeout功能时出现问题。

我有一个盒子，当你将它悬停时，它会变成蓝色。如果你离开它，它会以1秒的延迟变回红色。

然而问题是，如果将鼠标悬停在盒子上，然后在1秒之前将其快速悬停，它将变为蓝色一段时间，然后再变为红色。

它背后的想法是，它应该保持蓝色，只有你离开盒子超过1秒才会变成红色。希望你理解我:)。

为什么会这样？

我真的不知道为什么。

继承我的jQuery代码：

$('.box').hover(function() {
    $('.box').css({'background' : 'blue'});
}, function() {
    setTimeout(test, 1000);
    function test() {
        $('.box').css({'background' : 'red'});
    }
});

我试图进行谷歌搜索，发现这些：$(".box").stop(true,true).delay(1000).css({'background' : 'red'});和：

$('.box').hover(function() {
    $('.box').css({'background' : 'blue'});
}, function() {
    $('.box').delay(1000).queue( function(next){ 
        $('.box').css({'background' : 'red'});
        next(); 
    });
});

但似乎都没有正常工作。

有人可以帮助我:)）

谢谢--YaXxE

Fiddle Example

Answer 1

您必须存储计时器，以便在再次悬停时清除它

$('.box').on({
    mouseenter: function() {
        $(this).css('background', 'blue');
        clearTimeout($(this).data('timer'));
    },
    mouseleave: function() {
        var self = this;
        $(this).data('timer', 
            setTimeout(function() {
                $(self).css('background', 'red');
            }, 1000)
        );
    }
});

FIDDLE

Answer 2

使用延迟和进/出悬停处理程序，您可以使用：

DEMO jsFiddle

$('.box').hover(function (e) {
    var delay = e.originalEvent.type === "mouseover" ? 0 : 1000;
    $(this).finish().delay(delay).queue(function () {
        $(this).css({
            'background': e.originalEvent.type === "mouseover" ? 'blue' : 'red'
        });
    });
});

鼠标移出问题时jQuery延迟

2 个答案: