.NET開発者のためのブログメディア
JavaScriptのsetIntervalとは？setTimeoutやclearTimeoutについても解説！
目次
JavaScriptのsetIntervalとは？
ネットを見ているとアニメーションが動いたり、ゲームが遊べたりするWebページをよく見ます。それらの中にはJavaScriptだけで実現しているものが多くあります。どうしたらそのような動きのあるページを作ることができるのでしょうか。
それはsetIntervalを利用することで実現できるのです。setIntervalはタイマーのように指定した時間毎に処理を行うときに利用できます。この記事で解説するので是非ご覧下さい。
setIntervalのサンプル
まずは実際にやってみましょう。以下のJavaScriptサンプルをhtmlのscriptタグ内に記述して、ページをブラウザで開いてみてください。
|
1 2 3 4 5 6 7 8 |
var counter = 0; function dispCount() { alert(counter++); } setInterval(dispCount, 2000); |
実行すると0と表示されたポップアップウィンドウが出て来て、2秒後には1と書かれたポップアップが出ます。その後も2・3・4・・・とずっと続きます。
サンプルの説明
上のJavaScriptサンプルを説明します。まずcounterという変数とdispCountという関数を定義します。dispCountは呼ばれるとcounterの中身をポップアップで表示して1加算します。setIntervalには定期的に呼び出す関数と、呼び出す間隔をミリ秒単位で指定します。
このサンプルではsetIntervalの関数にdispCount、呼び出す間隔に2000ミリ秒（2秒）を指定しています。これにより2秒毎にポップアップが表示されるのです。
setIntervalを停止するサンプル
setIntervalは停止することもできます。以下のJavaScriptサンプルを実行してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var counter = 0; var interval_id; function dispCount() { alert(counter); if (counter++==5) { alert('終了'); clearInterval(interval_id); } } interval_id = setInterval(dispCount, 2000); |
clearIntervalについての解説
上のJavaScriptサンプルはその前のサンプルに停止する処理を追加しています。dispCount内でcoutnerが5になったら「終了」と表示してclearIntervalというメソッドで停止します。
停止する時にインターバルIDを指定する必要がありますが、それはsetIntervalを呼ぶと戻り値として取得できます。その時にinterval_idという変数にインターバルIDを入れておいて、clearIntervalで指定して使用します。
setTimeoutについて
setIntervalと似ているsetTimeoutと言うメソッドがあります。以下のJavaScriptサンプルをご覧ください。
|
1 2 3 4 5 6 |
function dispAlert() { alert('呼ばれました。'); } setTimeout(dispAlert, 3000); |
実行すると、3秒後に「呼ばれました。」とポップアップが表示されて、それで終わります。setTimeoutはsetIntervalと違って、一度だけしか呼ばれないという違いがあります。
clearTimeoutについて
setTimeoutはclearTimeoutでキャンセルすることができます。以下のJavaScriptサンプルをご覧ください。
|
1 2 3 4 5 6 7 8 9 |
var timeout_id; function dispAlert() { alert('呼ばれました。'); } timeout_id = setTimeout(dispAlert, 3000); clearTimeout(timeout_id); |
前のサンプルを少し直しています。実行して3秒待ってもdispAlertは呼ばれず何も起こりません。setTimeoutの戻り値をclearTimeoutで指定することで、タイマーの発生を抑止することができるのです。
関数にパラメータを渡す
Internet Explorer 10以降のブラウザの場合、setIntervalで指定するパラメータを渡すことができます。以下のJavaScriptサンプルをご覧ください。
|
1 2 3 4 5 6 7 8 9 |
var counter = 0; function dispAlert(app_name, message) { alert(app_name + 'で見ています。' + counter + message); counter++; } setInterval(dispAlert, 2000, navigator.platform, '回目です。'); |
パラメータを渡すサンプルの解説
上のJavaScriptサンプルでは、setIntervalで関数名と実行間隔のミリ秒数に加えて、2つのパラメータを渡しています。navigator.platformはOS名を取得できます。dispAlertに2つのパラメータが渡されます。
実行すると、Windowsの場合は「Win32で見ています。0回目です。」というポップアップメッセージが表示されて、1・2・3・・・と増えて行きます。パラメータが渡せることがわかりましたね。なおsetTimeoutでも同様に渡すことができます。
setIntervalを使った簡単なゲーム
それではsetIntervalとsetTimeoutを使った簡単なJavaScriptゲームを作ってみましょう。以下をhtmlページのheadタグ内に記述してください。
|
1 2 3 4 5 6 7 8 9 |
<style> #t td { width: 80px; height: 80px; font-size: 40px; border: 1px solid #bbb; text-align:center; } </style> |
そして以下をhtmlのbodyタグ内に記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<table id="t"> <tbody> <tr><td id="m1"></td><td id="m2"></td><td id="m3"></td></tr> <tr><td id="m4"></td><td id="m5"></td><td id="m6"></td></tr> </tbody> </table> <div id="message"></div> <script> var mas = ['m1','m2','m3','m4','m5','m6']; var score = 0; function moguDisp() { if (Math.random() < 0.1) { var dasu = document.getElementById(mas[Math.floor(Math.random()*6)]); if (dasu.innerHTML == '') { dasu.innerHTML = 'モ'; setTimeout(moguKesu, 1000, dasu); } } } function moguKesu(dasu) { dasu.innerHTML = ''; } function hit(e) { if (e.target.innerHTML == 'モ') { score++; document.getElementById('message').innerHTML = 'ヒット！' + score + "点"; e.target.innerHTML = ''; } } document.getElementById('m1').addEventListener('click', hit); document.getElementById('m2').addEventListener('click', hit); document.getElementById('m3').addEventListener('click', hit); document.getElementById('m4').addEventListener('click', hit); document.getElementById('m5').addEventListener('click', hit); document.getElementById('m6').addEventListener('click', hit); moguDisp(); setInterval(moguDisp, 100); </script> |
ゲームのソースの解説
このゲームはモグラたたきで、tableタグの6つのマスにでてくるモグラをクリックでタッチすると点数が入ります。styleタグはtableタグの見栄えをよくしています。moguDispという関数をsetIntervalで100ミリ秒毎に呼んでいます。
moguDispではランダムにモグラを表示しています。その時にsetTimeoutでモグラを消す関数moguKesuをセットして1秒後に消すようにしています。6つのマスはaddEventListenerでhitという関数を登録して、タッチされた時にモグラがいれば1点をscoreに加算しています。
以上のようにsetIntervalとsetTimeoutを使えばリアルタイムで動作するゲームを作ることができます。
JavaScriptのsetIntervalでリアルタイム処理を実現！
JavaScriptのsetIntervalについて解説しましたがご理解頂けましたでしょうか。リアルタイムに欠かせないこの機能で、面白いアニメーションやゲームを是非作ってみてください。
