JavaScriptを書いていて、
setTimeout関数と言うものを使う機会があったので、その使い方をメモ。
似たような関数に、setInterval関数があるが、その関数との違いも軽くメモ。
setTimeout関数とは
javascriptのsetTimeout関数とは、一定時間が経ったあと、
決められた処理を実行できる関数のこと（一回だけ実行）。書式は以下。
setTimeout(関数function, 一定時間の指定)※時間は「ミリ秒」で指定する。
参考：1000ミリ秒＝1秒
setTimeout関数の使い方の例
setTimeout関数の使い方について、まずは最も簡単な例を使って紹介する。
「呼ばれたよ」と出力するだけの関数draw()を定義し、
setTimeout関数によって、１秒後にdraw()を呼び出してみる
（関数名がdrawと言う変な名前ですが気になさらず、、うっかりしてた）。
setTimeout("draw()", 1000);
function draw() {
console.log("呼ばれたよ");
}
一度だけdraw()が呼び出されたのが分かる。
setTimeout関数で繰り返し処理を行う
setTimeout関数は「一定時間が経ったら処理を行う」と言う性質上、一回のみの実行で終わらせるのではなく、実際は「一定時間ごとの繰り返し処理」にしてプログラムを組むことが多い。なのでその方法をご紹介。
「n回呼ばれたよ」とコンソールに出力する関数draw()を定義し、
その最後でsetTimeout関数によって自身（draw()）を１秒後に再度呼び出す。
var count = 0;
draw();
function draw() {
count++;
console.log(count + "回呼ばれたよ");
setTimeout("draw()", 1000);
}
すると1秒毎に「n回呼ばれたよ」と出力される。
繰り返し処理の完成だ。
clearTimeout関数でタイマーを止める
上記の例で繰り返し処理は実装できるのだが、無限に実行されてしまう。
そこで、setTimeout関数での繰り返し処理を途中で止めたい場合は、
clearTimeout関数を使用してsetTimeoutの繰り返しを停止することができる。
方法は簡単で、clearTimeout関数の引数に、
setTimeout関数実行時の戻り値であるタイマーIDを指定してあげればOKだ。
#タイマーIDを取得
var timerId = setTimeout("draw()", 3);
#処理を停止
clearTimeout(timerId);これを利用して、先ほどのプログラムを、
「10回行ったら処理停止」と言う風に変更し、確認してみる。
var count = 0;
draw();
function draw() {
if (count == 10) {
var timerId = setTimeout("draw()", 3);
clearTimeout(timerId);
} else {
count++;
console.log(count + "回呼ばれたよ");
setTimeout("draw()", 1000);
}
}10回呼ばれた段階で処理が停止した。
このように任意のタイミングで繰り返し処理を停止することも可能だ。
おまけ：setInterval関数との違い
最後に、setTimeout関数と似たような関数で、
setInteraval関数と言うものがあるので、参考までに紹介しておく。
setInterval関数とは、一定時間毎に、
決められた処理を実行できる関数のこと。書式は以下。
setInterval(関数function, 一定時間の指定)
「おいおい待て、setTimeoutで繰り返し処理やんなくてもこっち使えば早いやんけ」と思った方、早まるべからず。微妙に違いがあるらしいので違いをご紹介。
- setIntervalで繰り返し処理をおこなった場合：処理開始時点から一定時間後に同じ処理を繰り返す
- setTimeoutで繰り返し処理をおこなった場合：処理終了時点から一定時間後に同じ処理を繰り返す
上記の違いで問題になるのは、「処理実行時間が含まれるか否か」と言うことだ。
どう言うことかと言うと、setIntervalの場合、処理開始時点からの一定時間で次の処理が実行されてしまうため、実行中の処理が完了するのを待たずして次の処理が実行されてしまう可能性があると言うことだ。
つまり、本来「実行1→終了1→実行2→終了2」となるはずが、「実行1→実行2→終了1→終了2」のようになってしまう可能性があると言うことだ。
一方setTimeoutの場合、処理終了時点からの一定時間で次の処理開始なので、必ず「実行→終了→実行→終了」のループが崩れることはない。
※特に検証したわけではないが、テックアカデミーさんの記事を解釈しただけなので、間違っていたら指摘して欲しい
以上
コメントを残す