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

タイマー処理

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

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

setTimeoutの使い方

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

jQuery

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

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

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

jQuery

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

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

setTimeoutの使い方

setTimeoutで繰り返し処理

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

jQuery

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

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

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

setTimeoutで繰り返し処理

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

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

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

jQuery

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

 countUp();

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

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

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