一定時間で繰り返す（setTimeout）

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

前のページではsetInterval()を使ったタイマー設定について見ました。このページではもう一つのタイマー設定方法、setTimeout()について説明していきます。

setTimeout()を使ったサンプルスクリプト

setTimeout()は設定時間後に関数を呼び出す命令文で、それ自体では繰り返しは起こりません。例えば以下のスクリプトをHTMLのBODY内に書いてみてください。 3秒後にメッセージが表示されて終わりになります。

<form>
<input type="button" value="Timer"
                  onclick="setTimeout('mes()',3000)">
</form>

<script>
function mes()
{
  alert("3秒経ちました！");
}
</script>

＜サンプル＞

setTimout()の括弧内は、以下のようになっています。関数名はクォーテーションで括るのを忘れないようにしましょう。上記サンプルではダブルクォーテーションで囲まれた中に記入しているので、関数名はシングルクォーテーションで括っています。

setTimeout(関数名,時間): 設定した時間（単位はミリ秒）が経過すると、関数を呼び出します。

では、setTimeout()を使って動作を繰り返すにはどうしたらいいか、次に考えましょう。

setTimeout()を使って繰り返す

ここでは、前のページと同じように一文字ずつ表示するスクリプトを組んでみたいと思います。 setTimeout()は1度関数を呼び出すと、役目を終えてしまいます。では、繰り返すためどうすればいいでしょうか？ setTimeout()を関数の中に記入して、 自分自身を含む関数を呼び出すようにすれば良いのです。

<form name="timer">
<input type="button" value="スタート" onclick="hyoji()"><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 = "";
  }

  //setTimeout()を含む関数を呼び出す
  setTimeout("hyoji()",1000);
}


</script>

＜サンプル＞

スクリプトの解説は前のページを見てもらえたら良いと思います。変更点は、ボタンで呼び出す関数がhyoji()になっています。直接文字表示関数を呼び出しています。

そして関数hyoji()の一番最後に、setTimeout()で再び関数hyoji()を呼び出します。これで繰り返しが発生する訳です。

注意点を一つ。setTimeout()による繰り返しは、setInterval()と比べてずれが生じます。上記スクリプトでは1000ミリ秒毎に関数が呼び出される訳ですが、 11文字表示するのに11秒以上掛かります。 1000ミリ秒後に関数が呼び出され、関数内の処理が行われた後に、再びsetTimeout()が呼び出されるからです。関数内の処理が0.2秒掛かるとすれば、上記の文字表示の間隔は1.2秒毎ということになります。

setInterval()は関数の呼び出し間隔を指定するので、一定時間毎に処理を繰り返したいなら、こちらを使うと良いかもしれません。しかし重い処理を繰り返す場合、処理し切らないうちに次を呼び出してトラブルになったりします。目的・用途に合わせて使い分けていきましょう。

前へ次へ