読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】タイマー処理【随時更新】

タイマー処理

setInterval
一定時間ごとにある処理を繰り返す。

前の処理が終わったかどうかを"判断せず"に繰り返す。

setInterval(function, 時間指定,functionの引数1, functionの引数2,…)

例 指定した関数を指定時間ごとに繰り返す。

var i = 0;
function count(){
console.log(i++);
}
setInterval(count,1000);
clearInterval
setIntervalで設定された繰り返しをキャンセルでする

setIntervalの処理を変数の代入して、clearIntervalをかける

var i = 0;
function count(){
console.log(i++);
if(i > 3){
clearInterval(set);
}
}
var set = setInterval(count,1000);

無名関数を使う書き方

var i = 0;
function count(){
console.log(i++);
}
var set = setInterval(function(){
count();
if(i > 3){
clearInterval(set);
}
},1000);
setTimeout
一定時間後にある処理を一回だけ実行。

前の処理が終わったかどうかを"判断して"繰り返す。

setTimeout(function,時間,引数1,引数2)

0.5秒後にcountを一回行い終了する。

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

setTimeoutをループさせる。
関数の中で同じ関数を呼び出す事でループできる。
最初の一回だけ呼び出す必要がある。

var i = 0;
function count(){
console.log(i++);
setTimeout(function(){
count();
},500);
}
count();
clearTimeout
setTimeoutの処理を止める。

この場合setTimeoutの後ろに記述しないと、clearTimeoutが効いたあとでまたsetTimeoutが呼び出されるので無意味。

var i = 0;
function count(){
console.log(i++);
var set = setTimeout(function(){
count();
},500);
if(i > 5){
clearTimeout(set);
}
}
count();