【初級編4】JavaScriptのsetTimeoutでタイマー処理を使ってみよう

JavaScript入門

本記事では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の正規表現の使い方、をみていきましょう。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました