【JavaScript入門】setIntervalの使い方まとめ

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。

タイマー処理などに使用するJavaScriptのsetIntervalについて解説します。

この記事では、

・setIntervalとは?

・clearintervalで処理をstopする方法

・setTimeoutとの使い方の比較

などの基本的な内容から

・コールバック関数でsetintervalを利用する方法

などの応用的な内容まで解説します。

setIntervalについて正しく理解し、必要な場面で使いこなせるようにしっかりと理解していきましょう。

setIntervalとは?

setIntervalの使い方

setIntervalの基本的な構文は以下の通りです。

setInterval(関数,処理間隔)
// 処理間隔の単位はミリ秒

setIntervalは第一引数に与えられた関数を、第二引数に与えられた間隔で実行します。

具体的なサンプルコードは以下の通りです。
(ただし、本サンプルコードを実行すると処理が半永久的に続いてしまうので、JavaScriptを実行しているブラウザを閉じる等の対応が必要です。)

window.onload = function () {

    // setIntervalの基本
    var timer1 = null;
    var cnt = 0;

    function event() {

        cnt++;

        // 1000ミリ秒ごとにコンソールに表示
        console.log('this time number is: ' + cnt);
    }

    // タイマー開始
    timer1 = setInterval(event, 1000);

}

実行結果

this time number is: 1
this time number is: 2
this time number is: 3
・・・

clearintervalで処理をstopする方法

前章では、setIntervalを使い、タイマー処理の基本を解説しました。

ではそのタイマー処理を止める為にはどうすればよろしいでしょうか?

そのために、clearIntervalメソッドを使います。

clearIntervalメソッドの引数に止めたい対象のタイマーのIDを指定します。

タイマーのIDは、setInterval()の返値として取得できます。

以下のサンプルコードは、前章で紹介したサンプルコードを改良したものです。

window.onload = function () {

    // setIntervalの基本
    var timer1 = null;
    var cnt = 0;

    function event() {

        cnt++;

        if (cnt >= 5 && timer1 != null) {
            // 5回以上表示したら、タイマーを停止する
            clearInterval(timer1);
        }

        // 1000ミリ秒ごとにコンソールに表示
        console.log('this time number is: ' + cnt);

    }

    // タイマー開始
    timer1 = setInterval(event, 1000);

}

実行結果

this time number is: 1
this time number is: 2
this time number is: 3
this time number is: 4
this time number is: 5

以上のように、1000ミリ秒間隔で、カウント値つきのメッセージが表示されています。

カウント値が5以上になった場合、clearInterval()によってタイマーが停止するため、メッセージも5個まで表示されています。

setTimeoutとの使い方の比較

setIntervalメソッドとよく比較されるメソッドにsetTimeoutメソッドがあります。

setTimeoutは第一引数に与えられた関数を、第二引数に与えられた時間(ミリ秒)後に実行するメソッドです。

setIntervalメソッドと異なり、setTimeoutメソッドの実行は一度だけ行われます。

setTimeoutメソッドは、例えば、5秒後にメッセージを表示する、などの用途に使用できます。

以下のサンプルコードでは、firelog()関数を5000ミリ秒後に実行するよう、setTimeout()でタイマーを登録し、そのタイマーのIDを、timer2に保存しています。

window.onload = function () {

    // setTimeoutの基本
    var timer2 = null;

    function firelog() {

        // 5000ミリ秒後に、コンソールにログを吐く
        console.log('5000milisec spaned!');

        if (timer2 != null) {
            // タイムアウトタイマーをクリア
            clearTimeout(timer2);
        }

    }

    // タイムアウトタイマー開始
    timer2 = setTimeout(firelog,5000);

}

実行結果

5000milisec spaned!

以上のように、5000ミリ秒後に、firelog()が一度だけ実行され、コンソールにログメッセージが表示されています。

コールバック関数でsetintervalを利用する方法

コールバック関数への引数の渡し方

setInterval()やsetTimeout()のコールバック関数には、引数を渡すこともできます。

以下はIE10以上で有効なコールバック関数への引数の渡し方です。

setInterval()実行時に、

var argTimer = setInterval(getArg, 1000, "apple", ++cnt);

と、第3引数、第4引数に"apple"、++cntを渡しています。

また、関数getArg()引数が2つあります。

getAerg()が1000ミリ秒間隔で5回呼び出されます。

window.onload = function () {

    // コールバック関数への引数の渡し方
    // IE10以上で使用可能

    var cnt = 0;

    function getArg(one, two) {
        console.log('arg one = ' + one);
        console.log('arg two = ' + two);
    }

    var argTimer = setInterval(getArg, 1000, "apple", ++cnt);

    setTimeout(function () { clearInterval(argTimer); }, 5000);

}

実行結果

arg one = apple
arg two = 1
arg one = apple
arg two = 1
arg one = apple
arg two = 1
arg one = apple
arg two = 1
arg one = apple
arg two = 1

以上のように、getArg()が1000ミリ秒間隔で5回よびだされています。

setInterval()の第4引数には、++cntを指定していましたが、この++cntはsetInterval()が実行されるときの1回だけ計算されますので、getArg()に渡される値は常に1です。

次にIE9以下でも実行可能なコールバック関数への引数の渡し方を見ていきましょう。

getArg2()は2つの引数を受け取ります。

そして、ポイントとなるのが、setInterval()の第1引数に指定している無名関数です。

この無名関数は、以下のようなコードになっています。

function () {

       getArg2("apple", ++cnt2);

}

このように、無名関数の中で、本来のコールバック関数getArg2()を引数つきで呼び出しています。

このように、無名関数を一段かませることにより、コールバック関数に引数を渡せます。

window.onload = function () {

    // コールバック関数への引数の渡し方    
    // IE9以下でも使用可能
    var cnt2 = 0;

    function getArg2(one, two) {
        console.log('arg2 one = ' + one);
        console.log('arg2 two = ' + two);
    }

    var argTimer2 = setInterval(function () {
        getArg2("apple", ++cnt2);
    }, 1000);

    setTimeout(function () { clearInterval(argTimer2); }, 5000);

}

実行結果

arg2 one = apple
arg2 two = 1
arg2 one = apple
arg2 two = 2
arg2 one = apple
arg2 two = 3
arg2 one = apple
arg2 two = 4
arg2 one = apple
arg2 two = 5

以上のようになりました。

getArg2()はgetArg()とは異なり、arg2 two のカウンタ値がカウントアップされています。

この違いを以下で説明します。

getArg()はsetInterval()に渡されるときに引数を受け取りますが、それはsetInterval()が実行されるときのみで、引数が評価されるのはそのとき1回だけです。

getArg2()の場合は、無名関数が実行されるたびに、無名関数内のカウンタcntが評価され、カウントアップされます。

そのため、無名関数の実行回数分カウントアップされ、その度にgetArg2()へカウントアップされたcnt2が渡されることになります。

このような違いがあることを、ぜひ、覚えておいてください。

誤ったコールバック関数の書き方

setInterval()やsetTimeout()に誤ったコールバック関数の与え方をしてしまうと、想定と違った動きになってしまいます。

以下のサンプルコードは誤ったコールバック関数の与え方をしています。

コード中、setInterval()の箇所で、

var cbTimer1 = setInterval(callback(), 1000);

と、callback関数に()をつけて指定しています。

しかし、この指定では、最初に1回だけcallback()が呼ばれるだけで、タイマーによる1000ミリ秒間隔での呼び出しはされません。

window.onload = function () {

    // コールバック関数の書き方
    // 誤ったコールバック関数の書き方
    var cnt = 0;

    function callback() {
        cnt++;
        console.log('call back No:' + cnt);
    }

    // 1000ミリ秒に1回callback()を呼び出す?
    var cbTimer1 = setInterval(callback(), 1000);

    // callback呼び出しタイマーを5000ミリ秒後に停止
    setTimeout(function () { clearInterval(cbTimer1); }, 5000);

}

実行結果

call back No:1

以上のように、1回だけしかcallback()は呼び出されていません。

次に正しいコールバック関数の書き方を見ていきましょう。

setInterval()の箇所は、

var cbTimer1 = setInterval(callback, 1000);

と、callback関数の指定時に()を付けていません。これは、setInterval()に関数オブジェクト自体を渡すという意味になります。

setInterval()にcallbackの関数オブジェクトが渡されたおかげで、タイマーもcallback関数オブジェクトを取得でき、1000ミリ秒間隔でcallbackを実行できます。

window.onload = function () {

    // コールバック関数の書き方
    // 正しいコールバック関数の書き方
    var cnt = 0;

    function callback() {
        cnt++;
        console.log('call back No:' + cnt);
    }

    // 1000ミリ秒に1回callback()を呼び出す
    var cbTimer1 = setInterval(callback, 1000);

    // callback呼び出しタイマーを5000ミリ秒後に停止
    setTimeout(function () { clearInterval(cbTimer1); }, 5000);

}

実行結果

call back No:1
call back No:2
call back No:3
call back No:4
call back No:5

以上のように、1000ミリ秒間隔でcallback関数が呼び出され、コンソールにログが5回出力されています。

3ヶ月でJavaScriptを使って未経験から仕事獲得

プログラミング学習を効率的に進めるためには、経験者からアドバイスをもらえる環境が大切になります。しかし、未経験者の場合はなかなか知り合いを作ることは難しいですよね。

そんな悩みを解決してくれるのが「プログラミングスクール」です。侍エンジニア塾では、1人のインストラクターが最後まであなたのプログラミング学習を徹底サポートいたします。

オンラインのマンツーマンレッスンであなたの進捗に合わせて授業が進むため、躓くことなく効率的にプログラミングを学ぶことが出来ますよ。

また、弊社ではフリーランスの案件獲得サポートや転職・就職支援も行っているため、プログラミングを仕事にしたいという方もぜひご検討ください。

下記のカレンダーから日程を選択することで「無料体験レッスン」を受講できます。オンライン受講もできますので、ご興味のある方はぜひお試し下さい。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説