第19話:タイマーによる処理

第3部 Webページのプログラミング

目次

マンガ










マンガ台詞

【1Page】
先生:さて 前回は イベントを学び
    インタラクティブな ページを作れる ようになったが
先生:だが イベントでは ユーザーが 何かアクションを しなければ 何も起きない
遊:ちょっと 寂しいわね
先生:そこで登場するのが 『タイマー』だ
遊:タイマー?
【2Page】
先生:そう この『タイマー』は 時限爆弾のようなものだ
遊:ひいい~~
先生:それじゃあ 実際に 『タイマー』を使った プログラムを 書いてみよう
        <!DOCTYPE html>
        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <script>
                function tokei() {
                    document.body.innerHTML = Date().toLocaleString();
                    window.setTimeout(tokei, 1000);
                }
                </script>
            </head>
            <body onLoad="tokei();">
            </body>
        </html>
    『2010年10月16日 13:46:20
    2010年10月16日 13:46:21
    2010年10月16日 13:46:22
    :』と表示
遊:うーん どういう意味かしら
【3Page】
先生:この『setTimeout』が ポイントになる
        setTimeout(tokei, 1000)
    2つめの引数の ミリ秒後 つまり1秒後に
    2つめの引数が 1000なので 1000ミリ秒後… つまり1秒後に
        1000ミリ秒 = 1秒
    1つめの関数の引数『tokei』が…
    つまり『function tokei(){~}』と 書いた部分が実行される
        tokei
遊:これで なぜ時計が 動き続けるの?
先生:まずは『<body>』の『onLoad』で 『tokei』が呼び出される
        <body onLoad="tokei();">
【4Page】
先生:『tokei』関数が 最後の行に来たら
    『setTimeout』に『toke』がセットされる
        setTimeout(a, b)    『b』の時間後に 『a』の処理を実行する
    その1秒後に 『tokei』が 再び実行される…
守:さらに『tokei』 が実行されて 延々と実行され 続けるわけですね
先生:そういうことだ
    それじゃあ タイマーを利用した プログラムを 各自書いてみろ
遊:できたわ!
先生:おっ早いな
【5Page】
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function tokei() {
                    var ele = document.getElementById("target");
                    // 『ほ』という文字を、『target』IDの内部HTMLに加える
                    ele.innerHTML += "ほ";
                    window.setTimeout("tokei()", 50);
                }
                // -->
                </script>
            </head>
            <body onLoad="tokei();">
                麗の真似~!
                <div id="target">お</div>
            </body>
        </html>
    『麗の真似~!
    おほほほほほほ…』と表示
麗:(拳骨)ゲシッ
    変なものを 作るんじゃないわよ
遊:うぐ~~
    会心の作だったのに~

説明

この章では、『タイマーによる処理』について学びます。

前回の章では、イベントによる処理を学びました。WebページのJavaScriptでは、ページの読み込みタイミングや、ユーザーの操作によって処理を実行する方法以外にも、『特定のタイミングで処理を実行する方法』があります。

本章では、そういった方法として、『タイマー』を学びます。この方法では、時限爆弾のように時計をセットして、一定時間が経過するとプログラムを実行させます。

それでは、『タイマー』について説明していきます。

『タイマー』

『タイマー』は、一定時間経過したあとに、プログラムを実行させる方法です。

この『タイマー』の処理は、『window』オブジェクトの『setTimeout』メソッドを利用して行います。この『setTimeout』の第1引数に実行したい処理の関数を、第2引数に何ミリ秒後に処理を実行させるかを書きます。

ミリ秒は、1秒の1/1000の長さです。そのため、1000ミリ秒が1秒になります。

以下、画面に日時を表示して、1秒ごとに更新していくプログラムの例です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        function tokei() {
            document.body.innerHTML = Date().toLocaleString();
            window.setTimeout(tokei, 1000);
        }
        </script>
    </head>
    <body onLoad="tokei();">
    </body>
</html>

まず、『』タグの『onLoad』属性で、『tokei』関数を呼んでいます。そのため、『body』要素の中に、現在の日時が表示されます。

そして最後に『window.setTimeout(tokei, 1000);』とタイマー処理が実行されます。ここでは、第2引数が『1000』なので、1000ミリ秒後(1秒後)に、第1引数である『tokei』関数が実行されます。

そして、1秒後に『tokei』関数が実行されて、再び日時が表示されて、再度1秒後に『tokei』関数が実行される……というように、処理が繰り返されます。

『arguments』

以下は、少し高度な話になるので、読み飛ばしても構わないです。特殊な書き方として、呼び出し元の関数オブジェクトを指定する方法もあります。

function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout(arguments.callee, 1000);
}

『arguments』は、関数のプロパティの1つで、引数を表しています。『arguments[0]』『arguments[1]』……とすることで、『1番目の引数』『2番目の引数』……を取り出すことができます。

この『arguments』には、『callee』という、『呼び出し元』を示す特殊なプロパティがあります。

上記の例では、呼び出し元が『tokei』という関数になっているので、『arguments.callee』は『tokei』を指します。

この呼び出し元が『無名関数』だった場合は、『arguments.callee』はその『無名関数』を指します。

それほど多用する書き方ではないでしょうが、覚えておくと便利な時があります。

『インターバル』

ここまでのプログラムでは、『setTimeout』を利用して繰り返し処理を書いてきました。しかし本来『setTimeout』は、一定時間後に1回だけ処理を行なうための命令です。

JavaScriptには、定期的に処理を行なう専用の関数『setInterval』が用意されています。この『setInterval』を利用して、同じような処理を簡潔に書いてみましょう。

// 時間を1秒ごとに表示
setInterval(function() {
    document.body.innerHTML = Date().toLocaleString();
}, 1000);

『タイマー』や『インターバル』の解除

『setTimeout』や『setInterval』を実行すると、戻り値としてidを戻します。このidを利用して処理を解除させることができます。

内容 セットとidの取得 idを使った解除方法
一定時間後の処理 var id = setTimeout(func, tm); clearTimeout(id);
一定時間毎の定期処理 var id = setInterval(func, tm); clearInterval(id);
var count = 0;
var id = setInterval(function() {
    document.write(count + "<br>");
    count ++
    if (count >= 10) {
        clearInterval(id);
        document.write("end.<br>");
    }
}, 500);

【結果】

0
1
2
3
4
5
6
7
8
9
end.

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(『タイマー』の例)を表示

sample1b.html』(『インターバル』の例)を表示

sample1c.html』(『タイマー』の例 callee版)を表示

sample2.html』(おほほほほ)を表示

sample2.html』(『解除』の例)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。