jQueryの基本 Part2

jQueryの基本 Part2

みなさん、こんにちは!ひよっ子プログラマuskです!
春なんてほんとになかったですね。。。梅雨もあるといっていいのでしょうか。。。
まだ6月ですよね?出勤するだけで汗をかく僕はどうやって本格的な夏を乗り切ればよいのでしょう?笑

さて、今回は前回に引き続き、JavaScript、jQueryについて、書いていきます!
今回は、時間に関するメソッド(setInterval()、setTimeout())について書いていきたいと思います。

この2つは一定時間ごとに動作を繰り返すときなどに用いられます。
動作を1回だけでなく、複数回繰り返したい!とか、画面を開いて数秒後に実行したい!など
そんなときにはこのメソッドを使いましょう!

それでは早速、2つのメソッドを使って簡単にプログラムを組んでみましょう。

setInterval

setInterval()は一定時間ごとに特定の関数を呼び出します。

上記のコードを実行すると、STARTボタンと緑色のボックスが1つずつ表示されます。
表示されたSTARTボタンをクリックすると緑色のボックスが点滅するというものです。

500ミリ秒掛けてフェードインし、500ミリ秒掛けてフェードアウトし、
setIntervalで1000ミリ秒間ごとにそれを繰り返します。

繰り返し処理がしたい場合は、こちらのsetIntevalで実装できます。

setTimeout

setTimeout()は、設定時間後に処理を実行するものになります。

上記jsファイルを以下のように書き換えてみましょう。

このように修正すると、STARTボタンをクリックした1秒後に緑色のボックスが点滅するというものです。
STARTボタンを押せば、何度でも実行は可能ですが、自動で繰り返すことはありません。

setTimeout()を使って、繰り返し処理を行う場合、jsファイルを以下のように修正すると実装できます。

別で関数を作成し、再起関数のように用いると実装できるわけですが、
このやり方をするのであれば、素直にsetIntervalを用いたほうがよいかと、個人的には思います。

まとめ

頻繁に使うようなメソッドではないかもしれませんが、簡単な使い方だけでも知っておいて損はありません。
皆さんもいろんなメソッド使ってみましょう!


Previous: 保存版!Webで使える心理学 ~リフレーミング効果編~ Next: Page Speed Insights APIを使って複数ページを解析する

© 2017 ALL CONNECT Inc. All Rights Reserved.