【JavaScript入門】 タイマー処理を行ってみよう！

setInterval と setTimeoutとは？

JavaScript では setInterval と setTimeout という命令が用意されています。

setInterval がある一定時間ごとにある処理を繰り返すというもの、setTimeout がある一定時間後にある処理を 1 回だけ実行するものになっています。 

setInterval と setTimeoutの構文

setInterval(関数function, 一定時間の指定[, 引数1, 引数2, …])

setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, …]) 

注意

setIntervalの「I」、setTimeoutの「T」は大文字で記述する必要があります。小文字の場合は処理は実行されません。

setIntervalの使い方（例）

下記例では0を基準に1ずつカウントを足して（count++）いったものをconsole.logで出力し、この一連の処理をさらにcountupという変数に入れています。

var i = 0;
var countup =function show(){
console.log(i++);
};

この変数countupの処理を１秒ごと（1000ミリ秒）ごと繰り返したい場合、setIntervalを追加します。

setInterval(countup,1000); 

setTimeoutの使い方（例）

setIntervalの例文をsetTimeoutに書き換えました。こうすると1 秒後に 1 回だけ実行されます。

var i = 0;
var countup =function show(){
console.log(i++);
};
setTimeout(countup,1000); 

setInterval と setTimeoutの使い分け

繰り返し処理には setInterval の方がいいのではないかと考えてしまうが、setInterval の方は前の処理が終わったか考えずに次の処理を始めてしまうため、あまりにも処理が重い場合には、次々に新しい処理が実行されて、ブラウザがクラッシュしてしまう可能性があります。setTimeout の方は前の処理が終わったか考慮するため、繰り返し処理には setTimeout の方がよく使われたりします。

setTimeout で繰り返し処理をする方法

「function show() { … }」の中に「setTimeout(function() { show(); }, 1000);」を入れてしまえば、show の中で show を呼び出すのでループになります。最初の 1 回だけ呼び出さないといけないので、「show();」とする必要があります。また、タイマーの止め方ですが、setTimeout を呼び出すときに「var tid = setTimeout…」として、タイマー ID を変数の中に入れます。ある条件下において…、例えば i が 3 より大きくなったらタイマーを止めたいという場合には、clearTimeout で先ほどの ID を指定すれば OK です。こうすることによって、i が 3 より大きくなったらタイマーが止まります。

var i = 0;
function show() {
console.log(i++);
var tid = setTimeout(function() {
show();
}, 1000);
if (i > 3) {
clearTimeout(tid);
}
}
show();