javascript - jQueryでmouseleaveアクションを遅らせる方法

Question

メニューがあります。このメニューにはいくつかの非表示のサブメニューがあるため、ホバー アクションの後に表示しています。サブメニューの表示にも遅延効果があります。ここで、非表示に同じ効果を追加したいと思います。しかし、それは機能していません。また、ホバー/マウス入力の次のメニュー要素に遅延を追加するにはどうすればよいですか?

$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this,
            time = 200;
        $(self).data('timer', setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, time));
    },
    mouseleave: function(){
        var self = this,
            time = 200;
        clearTimeout($(self).data('timer'));
        setTimeout(function() {
            $(self).children('.sub_menu_main').removeClass('opened');
        }, time);
    }
});

Answer 1

私はこの質問をうまく解決したので、次のようにします。

var timer;
$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, 100)
    },
    mouseleave: function(){
        var self = this;
        setTimeout(function(){
            if (!$(self).children('.sub_menu_main').is(":hover")){
                 $(self).children('.sub_menu_main').removeClass('opened');
            }
        }, 100);
    }
});

Answer 2

selfマウスリーブイベントで使用しないということでしょうか？thisその機能には何がありますか？それが参照していると思うものであるdebuggerかどうかを確認するためにステートメントを入れてください。this

Answer 3

の使用を検討しました.delay()か?

http://api.jquery.com/delay/