setTimeoutの処理の順番

javascript

マウスオーバーでふきだしを出すようにしたくて試行錯誤してました。
mouseover で、ふきだし表示、
mouseout で、ふきだし非表示みたいな。

で、悩んでたことは、
ふきだしをマウス長乗せ(？)で出そうと思って、mouseover の処理で

setTimeout(showF, 500);

とした時、
500ms待ってる間に mouseout が走ると、
マウスが乗ってないのにふきだしが出たままになる！ということ。

そこで、こちらで勉強させていただきました。
非常に分かりやすいです。ありがとうございます。

500ms以内に mouseout した場合、

  1. mouseover ＜表示処理を500ms後にセットするよ!＞
  2. mouseout ＜非表示にするよ！＞
  3. showF　　　＜表示するよ！＞

の順番で実行されてる感じなのです。


解決方法は、

  • グローバル変数で mouseOverCheck を定義＆falseにする
  • mouseover で mouseOverCheck をtrueにする
  • mouseout で mouseOverCheck をfalseにする
  • showF で mouseOverCheck がtrueならば表示する


もっとスマートな解決方法があったら教えてください。