【遅延実行！】意図的にイベントの○秒後に実行させる2つのjs

Web2017年8月7日

js開発の際、「○秒後にclassを付与したい」など何かしらの処理を遅延して行いたい場合があります。本記事ではそんな時に役立つ、遅延して実行させるjsを2つご紹介させていただきたいと思います。

サンプルコード①（setTimeoutを使う場合）

js

$('.hoge').click(function(){
    setTimeout(function(){
        alert("1秒後にアラートが表示されました");
    },1000);
    return false;
});

※jQueryを読み込んでいる場合のスクリプトとなります

html

<a href="#" class="hoge">クリックして1秒後にアラートが表示されます</a>

サンプルコード②（jQueryのdelayを使う場合）

js

$('.moge').click(function(){
    $(this).delay(3000).queue(function(){
        alert("3秒後にアラートが表示されました");
        $(this).dequeue();
    });
    return false;
});

※jQueryを読み込んでいる場合のスクリプトとなります

html

<a href="#" class="moge">クリックして3秒後にアラートが表示されます</a>

解説

1つめはsetTimeoutを使う方法です。setTimeout関数の中の処理を行いたい記述をし、関数の外にミリ秒で遅延させたい時間を指定します。ちなみにサンプルではクリック時のアンカーが効かないよう、return false;でリンクそのものを無効化しています。

※1秒後にする場合は「1000」と記述

2つめはjQueryのdelayを使う方法です。delay()のカッコ内にやはりミリ秒で遅延させたい時間を指定します。サンプルでは「$(this).dequeue();」を最後に書き加えることでキューをデフォルトに戻し、繰り返して何度でも実行できるようにしています。1度のみの実行で問題ない場合は不要です。こちらもreturn false;でリンク自体は無効化しています。

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

意図的にイベントの○秒後に実行させる2つのjs

まとめ

例えば、jsonやxmlを使って実装した複数カラムのコンテンツで確実に高さ揃えを行いたい場合などにおいて、しばしばこの遅延テクニックが役に立ちます。他にもアニメーション処理を組み合わせることでリッチな動きのあるコンテンツを実装することも可能です。

jsを使って遅延処理を行いたい場合はどうぞ本記事をご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。