プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScript、一定間隔で同じ処理を繰り返す
結論から言えば

setInterval(呼び出す関数名 or 処理 , 呼び出す間隔)

を使えばOKです。
呼び出す間隔はミリ秒指定ね。

例えば5秒ごとにダイアログを表示したい場合は

var timerId = setInterval("alert('aaa')", 5000);

のように書きます。
ちなみに第一引数は、関数名を指定する場合でもダブルクォートで囲む必要があります。
忘れると構文エラーになるのでご注意ください。

setInterval()で指定した繰り返し処理を止めたい場合は

clearInterval(タイマーID);

を使えばOKです。

こちらは戻り値無しで

clearInterval(timerId);

のように書きます。

それでは使い方のサンプルφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        <!--
            // タイマーID
            var timerId;
            // カウントアップ用の数字
            var nowNum = 1;
            // カウントアップ終了値
            var endNum = 10;

            // タイマー開始
            function startTimer(){
                this.timerId = setInterval("doProc()", 1000);
            }

            // タイマー終了
            function stopTimer(){
                clearInterval(this.timerId);
            }
            
            // 繰り返される処理
            function doProc(){
                $("#msg_area").html(nowNum);

                nowNum++;

                if(nowNum > endNum){
                    //タイマー終了
                    stopTimer();
                }

            }

            // 画面表示時の処理
            $(document).ready(function(){
                //タイマー開始
                startTimer();
            });

        // -->
    </script>
</head>
<body>
    <p id="msg_area"></p>
</body>
</html>

画面を表示すると、pタグの中に1から10まで順繰りに数字が表示されます。
中身は単純に、画面表示時にタイマーを開始、一定間隔で繰り返し実行される処理の中で
「nowNum」を「<p id="msg_area"></p>」に表示しつつカウントアップ、
「nowNum」が「endNum」より大きくなったらタイマーをストップってな流れです。

サンプルではjQueryをローカルに配置して動かしています。
そのままコピペしても動かないと思いますので、
「<script src="./js/jquery-1.7.2.min.js"></script>」の部分を適当に変更してください。

そんな感じ(--)ノ

あっ、そうそう。
ついでなんで書いておきますね。

「setInterval()」と似たような関数で「setTimeout」という奴がいます。
書き方は

setTimeout(呼び出す関数名 or 処理 , 処理実行までの時間)

です。

「setTimeout」は一定時間後に1回だけ指定の処理が動きます。
例えば

setTimeout("alert('aaa')", 5000);

と書くと、5秒後に1回だけダイアログが表示されますよ。
「setTimeout」は繰り返さないのでご注意くださいね。
処理を繰り返したい場合は「setTimeout()」ではなく「setInterval()」です。
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事