.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptのsetIntervalとは?setTimeoutやclearTimeoutについても解説!

JavaScriptのsetIntervalとは?setTimeoutやclearTimeoutについても解説!

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
JavaScriptのsetIntervalとは?setTimeoutやclearTimeoutについても解説!
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    Webページのアニメーションにタイマー処理を使用したいのですが、どんな関数がありますか?

    プロジェクト
    マネージャー
    では2つのタイマー処理関数を実際のコードを参考にしながら見ていきましょう。

    JavaScriptのsetIntervalとは?


    ネットを見ているとアニメーションが動いたり、ゲームが遊べたりするWebページをよく見ます。それらの中にはJavaScriptだけで実現しているものが多くあります。どうしたらそのような動きのあるページを作ることができるのでしょうか。

    それはsetIntervalを利用することで実現できるのです。setIntervalはタイマーのように指定した時間毎に処理を行うときに利用できます。この記事で解説するので是非ご覧下さい。

    setIntervalのサンプル

    まずは実際にやってみましょう。以下のJavaScriptサンプルをhtmlのscriptタグ内に記述して、ページをブラウザで開いてみてください。

    実行すると0と表示されたポップアップウィンドウが出て来て、2秒後には1と書かれたポップアップが出ます。その後も2・3・4・・・とずっと続きます。

    サンプルの説明

    上のJavaScriptサンプルを説明します。まずcounterという変数とdispCountという関数を定義します。dispCountは呼ばれるとcounterの中身をポップアップで表示して1加算します。setIntervalには定期的に呼び出す関数と、呼び出す間隔をミリ秒単位で指定します。

    このサンプルではsetIntervalの関数にdispCount、呼び出す間隔に2000ミリ秒(2秒)を指定しています。これにより2秒毎にポップアップが表示されるのです。

    setIntervalを停止するサンプル

    setIntervalは停止することもできます。以下のJavaScriptサンプルを実行してください。

    clearIntervalについての解説

    上のJavaScriptサンプルはその前のサンプルに停止する処理を追加しています。dispCount内でcoutnerが5になったら「終了」と表示してclearIntervalというメソッドで停止します。

    停止する時にインターバルIDを指定する必要がありますが、それはsetIntervalを呼ぶと戻り値として取得できます。その時にinterval_idという変数にインターバルIDを入れておいて、clearIntervalで指定して使用します。

    setTimeoutについて

    setIntervalと似ているsetTimeoutと言うメソッドがあります。以下のJavaScriptサンプルをご覧ください。

    実行すると、3秒後に「呼ばれました。」とポップアップが表示されて、それで終わります。setTimeoutはsetIntervalと違って、一度だけしか呼ばれないという違いがあります。

    clearTimeoutについて

    setTimeoutはclearTimeoutでキャンセルすることができます。以下のJavaScriptサンプルをご覧ください。

    前のサンプルを少し直しています。実行して3秒待ってもdispAlertは呼ばれず何も起こりません。setTimeoutの戻り値をclearTimeoutで指定することで、タイマーの発生を抑止することができるのです。

    関数にパラメータを渡す

    Internet Explorer 10以降のブラウザの場合、setIntervalで指定するパラメータを渡すことができます。以下のJavaScriptサンプルをご覧ください。

    パラメータを渡すサンプルの解説

    上のJavaScriptサンプルでは、setIntervalで関数名と実行間隔のミリ秒数に加えて、2つのパラメータを渡しています。navigator.platformはOS名を取得できます。dispAlertに2つのパラメータが渡されます。

    実行すると、Windowsの場合は「Win32で見ています。0回目です。」というポップアップメッセージが表示されて、1・2・3・・・と増えて行きます。パラメータが渡せることがわかりましたね。なおsetTimeoutでも同様に渡すことができます。

    setIntervalを使った簡単なゲーム

    それではsetIntervalとsetTimeoutを使った簡単なJavaScriptゲームを作ってみましょう。以下をhtmlページのheadタグ内に記述してください。

    そして以下をhtmlのbodyタグ内に記述してください。

    ゲームのソースの解説

    このゲームはモグラたたきで、tableタグの6つのマスにでてくるモグラをクリックでタッチすると点数が入ります。styleタグはtableタグの見栄えをよくしています。moguDispという関数をsetIntervalで100ミリ秒毎に呼んでいます。

    moguDispではランダムにモグラを表示しています。その時にsetTimeoutでモグラを消す関数moguKesuをセットして1秒後に消すようにしています。6つのマスはaddEventListenerでhitという関数を登録して、タッチされた時にモグラがいれば1点をscoreに加算しています。

    以上のようにsetIntervalとsetTimeoutを使えばリアルタイムで動作するゲームを作ることができます。

    システム
    エンジニア
    この2つだけで動きのあるWebページがつくれますね!

    プロジェクト
    マネージャー
    そうですね。動きを繰り返す関数と1度だけ動く関数で、見栄えのするページが作れますね 。

    JavaScriptのsetIntervalでリアルタイム処理を実現!

    JavaScriptのsetIntervalについて解説しましたがご理解頂けましたでしょうか。リアルタイムに欠かせないこの機能で、面白いアニメーションやゲームを是非作ってみてください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job