jQueryのsetTimeoutを使用してみる

JavaScriptで「何秒後」かに処理を実行したい時に使えるsetTimeoutですが、いつも記述の方法を忘れてしまうので、自分用にメモしておきます。

タイマー処理

JavaScriptで処理を遅延させたり、数秒ごとに処理を繰り返したりしたい時に使える関数は以下の2種類です。

• setInterval：一定時間ごとに特定の処理を繰り返す
• setTimeout：一定時間後に特定の処理を行う

setTimeoutの使い方

setTimeoutは、処理内容を指定したタイミングで、1度だけ実行します。

setTimeout(処理内容, 実行のタイミング)

実際に簡単な関数を用意して、処理方法を見ていきます。

以下、countという変数に、１つずつ足してカウントアップさせて、console.logに出力させたいとします。この処理を1秒後に呼び出したいので、setTimeoutを追加し、1秒後に処理が実行させるように指定します。

var count = 0;
var countUp = function() {
 	console.log(count++);
}
setTimeout(countUp, 1000);

ただ、これだと、setTimeoutは１度しか実行されないので、console.logにはcount = 0の「０」が出力されるだけです。

setTimeoutで繰り返し処理

先ほどの処理をカウントアップするように変更するには、繰り返し処理の中にsetTimeoutを記述します。そして、定義した関数（ここではcountUp）を呼び出してカウントアップを実行させます。

var count = 0;
var countUp = function() {
 	console.log(count++);
  
 	setTimeout(countUp, 1000); 
}

countUp();　// 変数countUpを実行

こうすると、読み込み完了後の1秒後からカウントアップがスタートし、console.logにカウントが出力され続けます。

ただし、この記述だと永遠とカウントされてしまいます。

繰り返し処理を停止させる

出力され続ける繰り返し処理を停止させるためには、clearTimeoutを使用します。これで、10までカウントしたら処理を停止させるよう指定してみます。

var count = 0;
 var countUp = function() {
 	console.log(count++);
  
 	var stop = setTimeout(countUp, 1000);
	if (count > 10) {
		clearTimeout(stop);　// 戻り値を指定
	}
 }

 countUp();

コンソールログを見てみると、ちゃんと10までカウントして止まっているのが確認できました。

以上が、setTimeoutの簡単な使い方です。