こんにちは、ナカムラです。
今回は、setTimeOutのクリアの仕方を紹介しようと思います。
setTimeOutは一定の時間が経ったら処理を開始するメソッドです。
ロード後に少し時間を置いてからアニメーションを実行するなどの使い方ができます。
さて、設定した時間が経つと実行される仕様ですが、
マウスオーバーをトリガーとした場合、指定した時間が経つ前にマウスアウトしたら、実行しないようにしたいです。
DEMOでは、画像タグを生成する処理を作ってみました。
DEMO
See the Pen カーソルが離れたらsetTimeOutをクリアする by Nakamura (@takayo-nakamura) on CodePen.
ボタンにマウスオーバーして、0.5秒後に画像を表示します。
0.5秒に満たない場合は画像は生成されません。
※画像が表示されている場合は、削除になります。
関数addImage（画像の生成）を、setTimeoutで実行する仕様になります。
※画像生成の説明はsetTimeout・ clearTimeoutとは関係ないので、省きます。
setTimeoutをクリアするメソッド、clearTimeout
clearTimeoutはsetTimeoutで呼び出されたタイムアウト（処理）をクリアするメソッドです。
clearTimeoutについて：clearTimeout() - Web API | MDN
引数にクリアしたい「タイムアウトID」を指定します。
clearTimeout(timeoutID)
「タイムアウトID」についてはこちらのページの例で説明されています。
setTimeout() - Web API | MDN
setTimeoutを実行する際に、変数に代入することで、この「タイムアウトID」を扱えるようになります。
DEMOの21〜30行目の記述になります。
console.logで「タイムアウトID」の内容を表示しています。
IDとなる数字が入っているのがわかります。
（codepenのエラーが起きていますがそちらは無視してください）
// mouseOverしたらsetTimeoutを実行 const mouseOver = () => { timeoutId = setTimeout(addImage, 500) console.log(timeoutId) } // mouseOutしたらsetTimeoutをクリア const mouseOut = () => { clearTimeout(timeoutId) }
あとはこの関数をaddEventListenerで動かします。
addEventListener内にsetTimeoutやclearTimeoutを書いてしまうと、「タイムアウトID」を引き継げないので、関数化して使います。
// mouseOver／mouseOutのイベント button.addEventListener('mouseover', mouseOver) button.addEventListener('mouseout', mouseOut)
おさらい
ポイントとしては、この二つになります。
- 「タイムアウトID」を使う
- setTimeoutやclearTimeoutを関数化する
メガメニューの開閉処理にも使えますね。
CSSだけでは制御できない場合などに活用できるのではないでしょうか。
