本記事ではsetTimeoutを使ったタイマー処理について解説します。
タイマー処理ができるようになると、ブラウザにスライドショーを追加するなどが可能です。
ポートフォリオを作る際は、タイマー処理を使って、スライドショーやアニメーションを作ると、評価されやすくなりますよ。
本記事ではsetTimeoutの基本的な使い方を解説していきます。
JavaScriptのsetTimeoutとは？
タイマー処理とは、一定の時間になったら実行される処理のことです。
処理内容と時間を指定することで、その時間にプログラムを実行できます。
代表的なものはスライドショーで、あれば一定の時間になったら次の画面に自動的に移動するようになっているのです。
また、タイマー処理にはsetTimeoutとsetIntervalの2種類があります。
setTimeoutは、一定時間後に一度だけ特定の処理を行うものです。
setTimeoutの基本的な使い方
setTimeoutの基本的な使い方を解説しましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
let cnt = 0;
console.log(cnt);
function time_test() {
console.log(++cnt);
}
setTimeout(time_test, 1000);
</script>
</body>
</html>○実行結果(最初)
○実行結果(1000ミリ秒後)
上記のコードはtime_testという関数をsetTimeoutを使って、一定時間後に動かしています。
setTimeout関数の第一引数に動かしたい関数名を指定します。
そして第二引数には、「処理終了後○ミリ秒後に動くか」を指定します。
1秒は1000ミリ秒なので、1秒後に動く、ということですね。
こうすることで、1000ミリ秒後にtime_testが動いてくれます。
setTimeoutで何度も処理を繰り返す方法
つづいて、setTimeoutで繰り返し処理を行う方法をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
let cnt = 0;
console.log(cnt);
function time_test() {
console.log(++cnt);
Id = setTimeout(time_test, 1000);
if(cnt > 5){
clearTimeout(Id);
}
}
time_test();
</script>
</body>
</html>○実行結果
上記のコードでは、time_testの中でsetTimeoutを動かしています。
こうすることで、time_testが動く⇒setTimeoutが発動する⇒time_testが動く、の無限ループを発生させられます。
無限ループは、if文を使うことで処理を途中で止めましょう。
上記の例ではcntが5より大きくなったら処理を止めています。
setTimeoutの処理は、clearTimeoutを使うことで止められます。
clearTimeoutの引数には、止めたいsetTimeoutの処理を指定する必要があるため、一度setTimeoutの処理をIdという変数に格納し、それを指定しているのです。
JavaScriptのsetIntervalとは
setIntervalは、setTimeoutと並ぶJavaScriptのタイマー処理で使う関数のことです。
setIntervalは一定時間ごとに何度も処理を繰り返すのが特徴です。
たとえば、3秒おきに処理を実行したい場合などに使えます。
注意すべきなのは、処理が始まってから3秒後に次の処理が始まることです。
処理が終わってから3秒後ではありません。
そのため、実行に3秒以上かかる処理の場合、setIntervalを実行すると、並列して処理が動くことになります。
あまり並列して複数の処理を動かしすぎないように気をつけましょう。
setIntervalの基本的な使い方
setIntervalの基本的な使い方をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
let cnt = 0;
function time_test() {
console.log(++cnt);
if(cnt > 5){
clearInterval(Id);
}
}
Id = setInterval(time_test, 1000);
</script>
</body>
</html>○実行結果
上記のコードでは、setIntervalによって、最初のものと全く同じ処理をしています。
setIntervalによって、time_testの関数が1000ミリ秒ごとに実行されています。
また、setIntervalの処理はclearIntervalによって止めています。
setTimeoutの処理を止める場合はclearTimeout、setIntervalの場合はclearIntervalを使うのです。
まとめ
本記事ではJavaScriptのsetTimeoutやsetIntervalについて解説しました。
setTimeoutとsetIntervalの違いが理解頂けましたでしょうか？
setTimeoutは一回だけ処理を行うのに対し、setIntervalは何度も処理を行います。
setIntervalをそのまま使うと延々と処理が続いてしまうので、ストップさせる処理を入れるのを忘れないでくださいね。
次回はJavaScriptの正規表現の使い方、をみていきましょう。
