更新日: 2017年03月08日
公開日: 2015年12月05日

ゼロから始めるJavaScript講座Vol20　DOM操作〜繰り返し実行~

ゼロから始めるJavaScript講座　DOM操作〜繰り返し実行〜
一定間隔で繰り返し実行
課題

ゼロから始めるJavaScript講座　DOM操作〜繰り返し実行〜

一定間隔で繰り返し実行

繰り返しで処理を実行することで、便利な機能やリッチな見た目を実装することができます。まずはお手本通りプログラムを作成してみましょう。

ファイル名: setInterval.html

[code title="setInterval.html"]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>一定間隔で繰り返し実行</title>
    <script>
        function count_time() {
            var timer = document.getElementById('timer');
            var date = new Date();
            timer.innerHTML = date.toLocaleString();
        }

        window.onload = function() {
            // 1秒(1000ミリ秒)ごとにcount_time関数を実行
            setInterval(count_time, 1000);
        }
    </script>
</head>
<body>
    <div id="timer"></div>
</body>
</html>

div要素に現在時刻を常に表示する、時計のようなものができます。

setIntervalメソッドを利用すると、一定の間隔を置いて関数を繰り返し実行することができます。

今回の例では現在時刻を取得してdiv要素の内容を入れ替えるcount_time関数を1秒(1000ミリ秒)ごとに実行しています。これにより、時計のような振る舞いとなります。
setIntervalメソッドによる繰り返し実行は、停止することも可能です。お手本通りプログラムを作成してみましょう。
ファイル名: clearInterval.html

[code title="clearInterval.html"]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の作成・追加</title>
    <script>
        // 変数を定義
        var interval_id;

        function start_flash_text() {
            // 1秒ごとにflash_textを実行
            interval_id = setInterval(flash_text, 1000);
        }

        function flash_text() {
            var flash = document.getElementById('flash');

            // p要素の文字色を赤か青に変更
            if (flash.style.color === 'red') {
                flash.style.color = 'blue';
            } else {
                flash.style.color = 'red';
            }
        }

        function stop_flash_text() {
            // setIntervalによる繰り返し動作を停止
            clearInterval(interval_id);
        }

        window.onload = function() {
            var start = document.getElementById('start');
            start.addEventListener('click', start_flash_text, false);

            var stop = document.getElementById('stop');
            stop.addEventListener('click', stop_flash_text, false);
        }
    </script>
</head>
<body>
    <p id="flash">flash text</p>
    <button id="start">start</button>
    <button id="stop">stop</button>
</body>
</html>