鼠标移出问题时jQuery延迟

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(); 
    });
});

但似乎没有一个正常工作.

有人可以帮帮我吗 :)？

谢谢--TheYaXxE

小提琴示例

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)
        );
    }
});

小提琴