jQueryでhover時の処理を指定時間だけ遅らせる方法
jQueryを使っているサイトで、以下のことをやりたいときにどうすればいいのか、調べてみました。
・特定要素にmouseenterした時に、別途作ったプルダウンで情報を出したい。
・そのプルダウン内には、マウスオーバー時にDBへAjaxでリクエストし、動的に取ってきたデータを入れたい。
・但しこれだと、マウスホバーするたびにリクエストされてしまう(マウスポインタがチラッと乗っかっただけでも行われる)。負荷軽減のため、mouseenterして一定時間経過後(500ミリ秒とか)にリクエストを出すようにしたい。
・hoverIntentという有名なjQueryプラグイン使うと可能にはなるが、プラグイン使わずにもっと手軽にやりたいというわがまま付き。
やり方が悪いのか、普通にsetTimeout/clearTimeout使っても反映されない(タイマー自体はセットされるがmouseleave時にクリアされない)ので、いろいろ調べていると、data()メソッド使うといいということが分かりました。
$('#tg').hover(function() { var t = setTimeout(function() { //マウスオーバー時に行いたいAjax処理 }, 500); $(this).data('timeout', t); }, function() { clearTimeout($(this).data('timeout')); });
上記コードで、IDが"tg"の要素にマウスが乗った時、500ミリ後に各種処理を実行できるようになります。
対象要素自体にdata()でタイマーをセットするとうまくクリアできるようです。