.net column
.NET開発者のためのブログメディア

Webアプリケーションの作成

JavaScriptのsetIntervalとは?setTimeoutやclearTimeoutについても解説!

2021年01月27日

SE
Webページのアニメーションにタイマー処理を使用したいのですが、どんな関数がありますか?

PM
では2つのタイマー処理関数を実際のコードを参考にしながら見ていきましょう。

JavaScriptのsetIntervalとは?


ネットを見ているとアニメーションが動いたり、ゲームが遊べたりするWebページをよく見ます。それらの中にはJavaScriptだけで実現しているものが多くあります。どうしたらそのような動きのあるページを作ることができるのでしょうか。

それはsetIntervalを利用することで実現できるのです。setIntervalはタイマーのように指定した時間毎に処理を行うときに利用できます。この記事で解説するので是非ご覧下さい。

setIntervalのサンプル

まずは実際にやってみましょう。以下のJavaScriptサンプルをhtmlのscriptタグ内に記述して、ページをブラウザで開いてみてください。

実行すると0と表示されたポップアップウィンドウが出て来て、2秒後には1と書かれたポップアップが出ます。その後も2・3・4・・・とずっと続きます。

サンプルの説明

上のJavaScriptサンプルを説明します。まずcounterという変数とdispCountという関数を定義します。dispCountは呼ばれるとcounterの中身をポップアップで表示して1加算します。setIntervalには定期的に呼び出す関数と、呼び出す間隔をミリ秒単位で指定します。

このサンプルではsetIntervalの関数にdispCount、呼び出す間隔に2000ミリ秒(2秒)を指定しています。これにより2秒毎にポップアップが表示されるのです。

setIntervalを停止するサンプル

setIntervalは停止することもできます。以下のJavaScriptサンプルを実行してください。

clearIntervalについての解説

上のJavaScriptサンプルはその前のサンプルに停止する処理を追加しています。dispCount内でcoutnerが5になったら「終了」と表示してclearIntervalというメソッドで停止します。

停止する時にインターバルIDを指定する必要がありますが、それはsetIntervalを呼ぶと戻り値として取得できます。その時にinterval_idという変数にインターバルIDを入れておいて、clearIntervalで指定して使用します。

setTimeoutについて

setIntervalと似ているsetTimeoutと言うメソッドがあります。以下のJavaScriptサンプルをご覧ください。

実行すると、3秒後に「呼ばれました。」とポップアップが表示されて、それで終わります。setTimeoutはsetIntervalと違って、一度だけしか呼ばれないという違いがあります。

clearTimeoutについて

setTimeoutはclearTimeoutでキャンセルすることができます。以下のJavaScriptサンプルをご覧ください。

前のサンプルを少し直しています。実行して3秒待ってもdispAlertは呼ばれず何も起こりません。setTimeoutの戻り値をclearTimeoutで指定することで、タイマーの発生を抑止することができるのです。

関数にパラメータを渡す

Internet Explorer 10以降のブラウザの場合、setIntervalで指定するパラメータを渡すことができます。以下のJavaScriptサンプルをご覧ください。

パラメータを渡すサンプルの解説

上のJavaScriptサンプルでは、setIntervalで関数名と実行間隔のミリ秒数に加えて、2つのパラメータを渡しています。navigator.platformはOS名を取得できます。dispAlertに2つのパラメータが渡されます。

実行すると、Windowsの場合は「Win32で見ています。0回目です。」というポップアップメッセージが表示されて、1・2・3・・・と増えて行きます。パラメータが渡せることがわかりましたね。なおsetTimeoutでも同様に渡すことができます。

setIntervalを使った簡単なゲーム

それではsetIntervalとsetTimeoutを使った簡単なJavaScriptゲームを作ってみましょう。以下をhtmlページのheadタグ内に記述してください。

そして以下をhtmlのbodyタグ内に記述してください。

 

ゲームのソースの解説

このゲームはモグラたたきで、tableタグの6つのマスにでてくるモグラをクリックでタッチすると点数が入ります。styleタグはtableタグの見栄えをよくしています。moguDispという関数をsetIntervalで100ミリ秒毎に呼んでいます。

moguDispではランダムにモグラを表示しています。その時にsetTimeoutでモグラを消す関数moguKesuをセットして1秒後に消すようにしています。6つのマスはaddEventListenerでhitという関数を登録して、タッチされた時にモグラがいれば1点をscoreに加算しています。

以上のようにsetIntervalとsetTimeoutを使えばリアルタイムで動作するゲームを作ることができます。

SE
この2つだけで動きのあるWebページがつくれますね!

PM
そうですね。動きを繰り返す関数と1度だけ動く関数で、見栄えのするページが作れますね 。

JavaScriptのsetIntervalでリアルタイム処理を実現!

JavaScriptのsetIntervalについて解説しましたがご理解頂けましたでしょうか。リアルタイムに欠かせないこの機能で、面白いアニメーションやゲームを是非作ってみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs