with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

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()でタイマーをセットするとうまくクリアできるようです。