Как отследить убирание мыши jquery?

Question

[Alexey10]

Ребят, всем привет))
Такой интересный вопрос:
$('#navbar-left ul > li').on('mouseleave', function(){
setTimeout (function(){
$(this).addClass('selected');

}.bind(this), 500);
});
Написал код, при убирании мыши, добавляем класс selected, через 0.5 сек. Такая ситуация, код работает исправно, но мне нужно как-то отследить такой момент. Чтобы класс добавлялся через 0.5 сек, только в том случае, если в течении 0.5 сек, я мышку не верну обратно. То есть, если я убрал мышку с блока, но успел вернуть её в течении 0.5 сек, класс selected не добавляеться. Надеюсь нормально обьяснил. Просьба помочь)) Буду благодарен всем)))

Answer 1

[Владимир Проскурин]

Делаете setTimeout после убирания мыши на 0.5 сек, который добавит класс. И если навести мышкой, то этот таймер убивается clearTimeout

Comments

[Alexey10]

Не совсем понял, сможешь чуть детальнее))
вот написал код

$('#navbar-left ul > li').on('mouseenter', function(){
setTimeout (function(){
$(this).removeClass('hover_menu');
$(this).addClass('selected');

}.bind(this), 500);
}).on('mouseleave', function(){
setTimeout (function(){
$(this).addClass('hover_menu');
$(this).removeClass('selected');

}.bind(this), 500);
});

при наведении через 0.5 сек добавляю и убираю класс, при убирании мышки тоже самое но наоборот тоже через 0.5сек. Я так понял мне при убирании мыши нужно также использовать "убийцу таймера clearTimeout" который использовал при наведении, не совсем понял как его убить?

[Владимир Проскурин]

$('#navbar-left ul > li').on('mouseenter', function () {
    $(this).data('timer', setTimeout(function () {
        $(this).removeClass('hover_menu');
        $(this).addClass('selected');

    }.bind(this), 500));
}).on('mouseleave', function () {
    var timer = $(this).data('timer');
    if(timer) {
        clearTimeout(timer);
    }
    $(this).addClass('hover_menu');
    $(this).removeClass('selected');
});

Answer 2

[tyzberd]

var timer;
    var dropdownLink = $(".js-nav-dropdown");
    var dropdownBlock = dropdownLink.find(".jsCountry");
    dropdownLink.on("mouseover", function () {
        clearTimeout(timer);
        dropdownBlock.show(300);
    }).on("mouseleave", function () {
        timer = setTimeout(
            function () {
                dropdownBlock.hide(300);
            }, 600);
    });