こんにちは！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()も引数が２つあります。
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()は２つの引数を受け取ります。
そして、ポイントとなるのが、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人のインストラクターが最後まであなたのプログラミング学習を徹底サポートいたします。
オンラインのマンツーマンレッスンであなたの進捗に合わせて授業が進むため、躓くことなく効率的にプログラミングを学ぶことが出来ますよ。
また、弊社ではフリーランスの案件獲得サポートや転職・就職支援も行っているため、プログラミングを仕事にしたいという方もぜひご検討ください。
下記のカレンダーから日程を選択することで「無料カウンセリング」を受講できます。オンライン受講もできますので、ご興味のある方はぜひお試し下さい。
お急ぎの方はこちらからお問い合わせください。
読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。
再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。
カウンセリングはオンラインにて実施しております。
※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します
1.ご希望の日時を選択してください
2.必須事項を入力してください
ご予約ありがとうございます！
予約が完了しました。ご予約情報とご参加前の準備をご確認ください。
【ご予約情報】○月○日(△) ○○：○○〜
カウンセリング参加に向けてのご準備
②LINE友だち登録
人生を切り開いた卒業生の事例をご紹介！
LINEトークで簡単にお問い合わせができます。
※記入いただいたメールアドレスに確認用メールをお送りしておりますのでご確認ください。
※オンラインカウンセリングはGoogle Meetにて実施します。URLが発行したら別途ご案内いたします。
※メールが届かない場合は、SAMURAI ENGINEERサポート（support@sejuku.net）までご連絡ください。
