ホームページ上で特定の要素だけ目立たせるために、アニメーションさせたり表示非表示を交互に行ったり、同じ処理を繰り返し行いたいときってありますよね。

JavaScriptで一定時間ごとに繰り返し処理を行うときにはsetInterval関数が便利です。

setIntervalを使う時は、

setInterval(‘関数名’ , ‘ミリ秒’);

という具合に、呼び出して実行する関数とどの程度の時間で繰り返しするかをミリ秒で設定します。

jQueryでは実行する関数を用意していなくても、function()を利用して次のように書くこともできます。

CodePenで実際に動くサンプルを下に用意したのでご確認ください。

See the Pen aLZpzp by Daisuke Koshimizu (@dkossy) on CodePen.

1秒毎に.boxに.color-redが追加されたり削除されたりという処理が繰り返されて要素の色が変化します。

setIntervalはアイデア次第で活用の場面が広がりますのでぜひ利用してみてください。

以上、JavaScriptやjQueryで同じ処理を一定時間で繰り返したいときの書き方でした。それではまた！

スマートフォンやタブレットに最適化したホームページの制作にも対応いたします。