一定時間で繰り返す（setInterval）JavaScript入門

setInterval()を使ったタイマーのサンプルスクリプト

タイマーには2種類あって、ここではsetInterval()という命令文を使ってみます。 もう一つは次のページで解説します。 setInterval()は、一定時間毎に特定の関数を呼び出します。

では、以下のスクリプトをHTMLのBODY内に記入してみて下さい。

<form name="timer">
<input type="button" value="スタート" onclick="startfnc()"><br>
<input type="text" name="moji" size="30" value="">
</form>

<script>

function hyoji()
{
  //表示する文字
  var str = "一文字ずつ表示します。";  

  //テキストボックスの文字数
  var cnt = document.timer.moji.value.length;

  //文字が全部表示されているか確認
  if ( cnt < 11 )
  {
    //現在より1文字多く切り出して表示
    document.timer.moji.value = str.substr(0,cnt+1);
  }
  else
  {
    //全て表示されたら、空文字に戻す
    document.timer.moji.value = "";
  }
}


function startfnc()
{
  //関数hyoji()を1000ミリ秒間隔で呼び出す
  setInterval("hyoji()",1000);
}

</script>

＜サンプル＞

スクリプトの解説

では上記スクリプトについて見ていきましょう。 フォーム名は「timer」、 ボタンを一つ配置してタイマーを起動させる関数startfnc()を呼び出します。 文字を表示するテキストボックスの名称は「moji」としました。

続いて、1文字ずつ表示する関数hyoji()の部分を見てみましょう。 変数strに表示させる文字列を代入します。 変数cntは、現在テキストボックスに表示されている文字数をlengthを使って取得し、 代入しています。全部表示されていたら、文字数は11になります。

そして、if～else文を使って、 文字が全部表示されてる場合と、そうでない場合とで分岐します。 まだ全部表示されていない場合は、substr()を使って現在より1文字多く変数strから切り出し、 テキストボックスに表示します。 全部表示されていたら、テキストボックスを空にします。

続いて、タイマーを起動する関数startfnc()の説明です。 ここでsetIntarval()が出てきます。 括弧内の1番目は関数名を、2番目は呼び出し間隔を記入します。 呼び出し間隔はミリ秒（1000分の1秒）単位になります。

setInterval(関数名,間隔)

特定の関数を指定した間隔で繰り返し呼び出します。単位はミリ秒。

上記のコードの場合、関数hyoji()を1000ミリ秒（つまり1秒）間隔で呼び出すことになります。 呼び出し間隔を少しずつ変えて、確認してみてください。

setInterval()の括弧内で関数名を記入するとき、 クォーテーションが必要です。良く忘れるので、 うまく動かないときは確認してみましょう。