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

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

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

JavaScriptのsetIntervalとは？

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

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

setIntervalのサンプル

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

var counter = 0;

function dispCount() {
    alert(counter++);
}

setInterval(dispCount, 2000);

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サンプルを実行してください。

var counter = 0;
var interval_id;

function dispCount() {
    alert(counter);
    if (counter++==5) {
        alert('終了');
        clearInterval(interval_id);
    }
}

interval_id = setInterval(dispCount, 2000);

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サンプルをご覧ください。

function dispAlert() {
    alert('呼ばれました。');
}

setTimeout(dispAlert, 3000);

function dispAlert() {

alert('呼ばれました。');

}

setTimeout(dispAlert, 3000);

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

clearTimeoutについて

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

var timeout_id;

function dispAlert() {
    alert('呼ばれました。');
}

timeout_id = setTimeout(dispAlert, 3000);
clearTimeout(timeout_id);

var timeout_id;

function dispAlert() {

alert('呼ばれました。');

}

timeout_id = setTimeout(dispAlert, 3000);

clearTimeout(timeout_id);

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

関数にパラメータを渡す

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

var counter = 0;

function dispAlert(app_name, message) {
    alert(app_name + 'で見ています。' + counter + message);
    counter++;
}

setInterval(dispAlert, 2000, navigator.platform, '回目です。');

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タグ内に記述してください。

<style>
#t td {
        width: 80px;
        height: 80px;
        font-size: 40px;
        border: 1px solid #bbb;
        text-align:center;
}
</style>

<style>

#t td {

width: 80px;

height: 80px;

font-size: 40px;

border: 1px solid #bbb;

text-align:center;

}

</style>

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

<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>

<tbody>

</tbody>

</table>

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を使えばリアルタイムで動作するゲームを作ることができます。

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

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

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

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

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

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

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020/03/17 2021/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020/03/16 2021/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

2020/03/05 2020/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

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

JavaScriptのsetIntervalとは？setTimeoutやclearTimeoutについても解説！

JavaScriptのsetIntervalとは？

setIntervalのサンプル

サンプルの説明

setIntervalを停止するサンプル

clearIntervalについての解説

setTimeoutについて

clearTimeoutについて

関数にパラメータを渡す

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

setIntervalを使った簡単なゲーム

ゲームのソースの解説

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

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務