[jQuery]マウスカーソルを外したら発火するけど時間内に戻せば発火をキャンセルする組み方

ヘッダーメニューのサブメニューとかに。

動作イメージ
こんな感じ

動作イメージ

マウスを乗せたら下の階層が表示されるメニューを作ったとする。

表示された部分からカーソルを外したらまた非表示に戻るようにする。

ついうっかりカーソルを外しただけだから、すぐに戻したら非表示にならないように猶予をもたせる。

そんな感じ。

こんな感じ

こんなのだったとして

<ul class="main">
    <li>
        <button>submenu</button>
        <ul class="sub">
            <li><a>....</a></li>
            <li><a>....</a></li>
            <li><a>....</a></li>
            <li><a>....</a></li>
        </ul>
    </li>
</ul>

こんな感じだったとして

ul.main{
    li{
        position: relative;
        ul.sub{
            display: none;
            position: absolute;
        }
    }
}

こう。

$(function(){
    //buttonを押したら.sub表示
    $('button').on('mouseenter',function(){
        $(this).next('.sub').fadeIn('fast');
    })

    //マウスを外したら1秒後に.subを非表示にするけど、1秒以内に戻ってきたら非表示キャンセル
    let hideTimer = null;
    $('button,.sub').on('mouseleave', function(){
        hideTimer = setTimeout(function(){
            $(this).fadeOut('fast');
        }, 1000);
    }).on('mouseenter',function(){
        if(hideTimer){
            clearTimeout(hideTimer);
            hideTimer = null;
        }
    })
})

以上です。