java script でマウスホバー時に待機時間後に実行したい

Question

JQueryのスライドショー 「slick」を利用して、
トヨタ公式サイトのメガメニューのような、上部メニューをマウスホバーすると
該当の番号のスライドが表示されるメガメニューを作っています。

おおむね上手く制作できたのですが、トヨタ公式サイトのように、
マウスを上部カテゴリーに「連続して次々にオンホバーした際」に、
反応しない項目が出てきてしまいます。

トヨタ公式サイトですと、かなり精密に素早く反応しているのです。
https://toyota.jp/index.html

<div id="header-mega-menu">
            <div class="mega-menu-content">
                <div class="mega-menu-content-item">
                    	    <ul class="nav-bodytype">
	                        	<li class="slick-GoTo-0" aria-controls="tab01" aria-selected="true" role="tab">
   	   	   	   	   	   	<button type="button">コンパクト</button></li>
	                        	<li class="slick-GoTo-1" aria-controls="tab02" aria-selected="false" role="tab">
   	   	   	   	   	   	<button type="button">ミニバン</button></li>
	                        	<li class="slick-GoTo-2" aria-controls="tab03" aria-selected="false" role="tab">
   	   	   	   	   	   	<button type="button">セダン</button></li>
	                    	</ul>
   ●●ここから、スライドさせる要素を記述●●
		</div>
	</div>
</div>


<script>
        // 指定のスライドに移動
        $('.slick-GoTo-0').on('click mouseenter', function() {	$('.slider').slick('slickGoTo', 0, false);		});
        $('.slick-GoTo-1').on('click mouseenter', function() {	$('.slider').slick('slickGoTo', 1, false);		});
        $('.slick-GoTo-2').on('click mouseenter', function() {	$('.slider').slick('slickGoTo', 2, false);		});
</script>

現状、上記のように記述しています。
下記のようにした場合、マウスホバー後にsetTimeoutしてしまいます。
できれば、0.3秒ほどマウスホバーした場合に、動作を開始してほしいのです。

<script>
        // 上記にsetTimeoutを追加してみたが、駄目でした。
        $('.slick-GoTo-0').on('click mouseenter', function() {
			setTimeout(function(){
				$('.slider').slick('slickGoTo', 0, false);
				},300);
			});
</script>

当方、WEB系の企画制作の担当で、HTML・CSSは分かるのですが、
Javascriptには詳しくないので、やさしく教えてもらえると助かります。

Comments

[Lhankor_Mhy]

Javascript の // は行コメントです。その行の終わりまでコメントと扱われます。

Answer 1

mouseleaveイベントでタイマーを止めるのはどうでしょうか。

WindowOrWorkerGlobalScope.clearTimeout() - Web API | MDN

---

質問の追記に合わせて追記

当方、WEB系の企画制作の担当で、HTML・CSSは分かるのですが、
Javascriptには詳しくないので、やさしく教えてもらえると助かります。

（やさしさここから）
Web系の業界に詳しくないので的外れなことをかもしれませんが、社内のコーダーに頼めばすぐ終わる話ではないのですか？
たとえば、ここで私が書いたコードをあなたが実装したとして、そのコードにセキュリティ的な問題があった場合は、あなたの責任になってしまうのでしょうか？
それも覚悟の上でやっているのであればいいのですが、そうではないならばジャンル違いのお仕事は控えた方が自分を守ることにつながると思います。
もし、社内の力関係で難しいのであれば、上司の方に相談してみるのもいいかもしれないですね。
（やさしさここまで）

---

動作するかは試してないです。

$('.slick-GoTo-0').on('click mouseenter', function () {
	const timer = setTimeout(function () {
		$('.slider').slick('slickGoTo', 0, false);
	}, 300);

	$('.slick-GoTo-0').one('mouseleave', function () {
		clearTimeout(timer);
	})
});

Comments

[退会済みユーザー]

setTimeout() したときの戻り値をtimeoutIDとして保持して、それを使ってclearTimeout()する形。

[Mania]

Javascriptには詳しくないので、全くわからないのですが……。

ようするに、メニューA → メニューB → メニューC と連続して動かした際に、
メニューA ＆ Bにマウスホバーした際のsetTimeout() タイマーを、
mouseleaveイベントでキャンセルするという事でよろしいでしょうか？

[Lhankor_Mhy]

> メニューA ＆ Bにマウスホバーした際のsetTimeout() タイマーを、
> mouseleaveイベントでキャンセルするという事でよろしいでしょうか？

まさにおっしゃるとおりです。

[Lhankor_Mhy]

追記しました。

[Mania]

わざわざ、ありがとうございます。
追記されたコードを試してみたところ、理想どおりに動作しました。

10回に1回くらい、動作がついていかない事があるようですが、
その際はまったく動かないので、マウスクリックしてもらえるかなと思います。

[Lhankor_Mhy]

お役に立てなかったようで残念です

[Mania]

いやいや、解決しました。ありがとうございました。
setTimeout の秒数を弄ってやったら、かなり改善しました。

ただ、あまりに速く何度も動かし過ぎると、
うまく動作しない場合はありますね。

Answer 2

Lhankor_Mhy さんのコードで、解決しました。
ありがとうございました。

その他、Slickの下部にあるDotsを、文字列に変更する形で実装することも出来るようです。
https://oyaoya1123.hatenablog.com/entry/2020/03/09/223119

Java-scriptが苦手な場合には、この方法のほうがお手軽かもしれませんね。

          button#DotsのCSSクラスを記述 {
            &:before {
              content: '変更したい文字列をここに記載する';
            }
          }