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

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

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

この記事では、

・setIntervalとは?

・clearintervalで処理をstopする方法

・setTimeoutとの使い方の比較

などの基本的な内容から

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

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

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

setIntervalとは?

setIntervalの使い方

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

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

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

実行結果

clearintervalで処理をstopする方法

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

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

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

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

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

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

実行結果

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

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

setTimeoutとの使い方の比較

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

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

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

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

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

実行結果

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

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

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

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

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

setInterval()実行時に、

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

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

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

実行結果

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

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

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

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

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

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

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

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

実行結果

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

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

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

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

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

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

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

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

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

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

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

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

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

実行結果

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

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

setInterval()の箇所は、

var cbTimer1 = setInterval(callback, 1000);

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

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

実行結果

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

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

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

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

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

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

貝原 輝昌

貝原 輝昌

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

おすすめコンテンツ

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

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