setIntervalとsetTimeout使い方と実践サンプル8本。イケてるjQueryアニメーションの基本！

2023年9月17日

カッコいいウェブサイトはみんな使ってる！？「setInterval」「setTimeout」を使いこなせ！

jQueryを使った美しいアニメーションを実装したウェブサイトが増えています。そして、アニメーション処理の肝となるのが「setInterval」「setTimeout」といったJavaScript関数であり、この関数を上手に使いこなせるかどうかで表現力に大きな差が出ます。

普段よく見る"動きのあるウェブサイト"についても、実際のプログラム実装を見ると「setInterval」「setTimeout」が上手に使われていることが多いです。

本記事では「setInterval」「setTimeout」の基本的な使い方と、具体的な実践例を紹介したいと思います。

Javascriptの遅延タイマー処理「setInterval」「setTimeout」の基本的な使い方。

最初に「setInterval」「setTimeout」の基本的な使い方についておさらいです。

jsソースコード　※ダブルクリックでコピペできます

使い方自体は非常に簡単です。1つ目の引数に遅延して実行したい処理内容、2つ目の引数にタイマー実行する時間（ミリ秒単位）を指定します。

「setTimeout」と「setInterval」違いは、秒数経過後に1回だけ処理を実行するのか、秒数ごとに繰り返し実行するのかの違いになります。

基本的な使い方自体はこれだけです。

しかし、このシンプルな関数をうまく使うことでビックリするくらい多彩な表現力を持ったウェブサイトを作ることができるのです。その具体的な実践例を次項以降で紹介したいと思います。

「setInterval」「setTimeout」の基本的な使い方がよくわかる実践サンプル4本

まるで時計！タイマーをウェブサイト上で表現

See the Pen
Countdown Clock by Adem ilter (@ademilter)
on CodePen.

非常に美しいですが、作りもシンプルな実践サンプルになります。

「1秒ごとに一の桁の表示を更新する処理(secondPlay)」と「10秒ごとに十の桁の表示を更新する処理(minutePlay)」の２つの処理がsetIntervalにて設定されています。

まるで時計のような表現をみごとにウェブサイト上で実装しています。

ボタンクリック後の動作をsetTimeoutで設定。デモサイト用に。

See the Pen
animation submit button by Valentin Galmand (@valentingalmand)
on CodePen.

ボタンをクリックしてみてください。

ローダーが出た後に、チェックマークに変化し、その後に元のボタンに戻るかと思います。この一連の変化をsetTimeoutにて多段設定しています。

実際のサイトを作る上ではあまり意味がない処理かもしれませんが、ボタンやウェブの動きをデモで見せたい場合に使える技ですね。

グラデーションのカラーチェンジをsetIntervalで実装。

See the Pen
Animated Background Gradient by Mario Klingemann (@quasimondo)
on CodePen.

こちらは10ミリ秒という非常に短い間隔で処理を実行することで、グラデーションのRGBを少しづつ変化させています。

カラフルに色が変化するデザインは、setIntervalを使うことで簡単に実装できます。

Velocity.jsでも使える

See the Pen
VelocityJS and SVG Moving Isoscape by Sarah Drasner (@sdras)
on CodePen.

jQueryやCSSのアニメーションだとスムーズに使えないケースで、アニメーション処理ライブラリ「velocity.js」を使っている人も多いでしょう。

Velocityでも遅延タイマー処理と組み合わせることで表現力を上げることができます。

よく見るスライダーやボタンエフェクトでも使われていた！応用編サンプル4本。

スライド・カルーセルの実装①

See the Pen
Simple Image Slider by André Cortellini (@AndreCortellini)
on CodePen.

時間経過ごとに表示内容が変わるスライド・カルーセルの実装でも遅延タイマー処理が使われています。

こちらのサンプルでは3秒ごとに自動スライドするように設定されています。また、ホバーのイベントでclearIntervalが実装されているので、動いているスライダーの上にマウスを持っていくと自動スライドが停止するようになっています。

スライド・カルーセルの実装②

See the Pen
Fullscreen drag-slider with parallax by Nikolay Talanov (@suez)
on CodePen.

こちらもスライド・カルーセルのサンプルになりますが、スマホのフリック・スワイプに対応しています。

touchstartのイベントにて、指でタッチでclearIntervalが実行されるようになっています。また、自動スライド以外にも、指で左右にスワイプすることでスライドを変更できるように実装されています。スマホユーザ向きのUIがどのように実装されているかがよくわかるサンプルです。

見た目のデザインも素敵ですね！

ボタンクリック後の時間差エフェクトを実装する

See the Pen
Material Compact Login Animation by Yusuf Bakır (@yusufbkr)
on CodePen.

こちらのサンプルは右上のマテリアルボタンをクリックした後に順次エフェクトが表示されます。多段階のエフェクトの処理を複数のsetTimeout処理で実装しています。

見た目がダイナミック！

TweenMax.jsでも使える！

See the Pen
3D Carousel Using TweenMax.js & jQuery by John Blazek (@johnblazek)
on CodePen.

こちらはTweenMax.jsと組み合わせているサンプルになります。

jQueryでは表現しきれないようなアニメーションを実装したい場合、先ほど紹介した「velocity.js」「TweenMax.js」などのアニメーション処理ライブラリを使うことも多いかと思います。

このようなjQuery以外のJSライブラリを使う場合でも遅延タイマー処理は表現力を上げるカギとなります。

以上になります。

「setInterval」「setTimeout」は非常にシンプルな関数なのですが、様々なデザインで応用的に使えることが理解いただけたと思います。是非、色々なアイデアで有効活用してみてください。