The Study of JavaScript 15 – setInterval setTimeout


cach

15 setInterval setTimeout


今回はJavaScriptに用意されている「setInterval」と「setTimeout」という物を試してみたいと思います。

今回のポイントは下のとおりです。

  • setInterval はある一定時間ごとに特定の処理を繰り返すもの(前の処理が終了したか意識せずどんどん繰り返す)
  • setTimeout は一定時間後に特定の処理を1回だけ実行するもの
  • 繰り返しをとめるときは「clearTimeout」をつかう

実際にコードに書いて動かしてみましょう。showというconsoleにiを表示しiに1足していく関数をつくります。
そしてそのshowを1000ミリ秒ごと(1秒毎)に実行させてみます。

  • index.html

  • 出力結果

    console01

    カウントアップしていっています。

次はsetTimeoutをみてみます。

  • index.html

    console01

    画像ではわかりにくいですが、1行後にshowが実行され0が表示されて終了しています。

この2つを比べると、繰り返し処理には setIntervalのほうが使えそうですが、setintervalは前の処理が終わったかどうかを待たずに次の処理を始めてしまいます。
処理が重いようなものが繰り返し実行されることになると、最悪ブラウザクラッシュという状況に陥ります。
setTimeoutは前の処理が終わったかどうかを考慮するので、実は繰り返し処理にはsetTimeoutのほうが使われるようです。
setTimeoutで繰り返しをさせるには、処理自体でループするように書きます。show()のなかでshow()を呼び出すような処理をするということです。

  • index.html

    console01

    setIntervalと同じように1秒毎に実行されてカウントアップしていっています。

このsetIntervalやsetTimeoutをとめたい場合は、setTimeoutを呼び出すときに、setTimeout自体を変数の中にいれます。
そしてif文で条件を書き、処理をとめたいときに「clearTimeout(変数名);」とします。

  • index.html

    console01

    3までカウントアップして、3になったらclearTimeoutが発動して終了しています。

以上、またみてね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です