鼠标出问题时的jQuery延迟

我在使用

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

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

谁能帮帮我吗

谢谢-是的

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

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

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

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

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


使用delay和in/out悬停处理程序，您可以使用：