JavaScriptでsetTimeoutを使う方法【初心者向け】現役エンジニアが解説
プログラミング初心者向けに、JavaScriptで【setTimeout】を使う方法を解説した記事です。setTimeoutは、繰り返さずに一度だけ、一定時間後に特定の処理を行うことができます。clearTimeoutも合わせて紹介。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでsetTimeoutを使う方法について解説します。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
【動画でも解説しています。クリックで見る！】
目次
- タイマー処理とは
- setTimeoutでタイマー処理をおこなう
- setTimeoutでsetIntervalのような繰り返しの処理をする方法
- setIntervalでの繰り返し処理とsetTimeoutでの繰り返し処理の違い
タイマー処理とは
Webサイトを見ていて、スライドショーなど、一定時間ごとに画像や文字が切り替わったりする動的な動きを見たことがあるのではないでしょうか。
それは、JavaScriptのタイマー処理という処理で実装できます。
タイマー処理にはsetTimeoutとsetIntervalの2種類があります。
両者は似た名前の関数ですが、それぞれ挙動が異なります。
それぞれのタイマー処理の特徴をみていきましょう。
2種類のタイマー処理
- setTimeout…一定時間後に一度だけ特定の処理をおこなう
- setInterval…一定時間ごとに特定の処理を繰り返す
どちらも文法は同じで、次のようになります。
setTimeout(関数function, 一定時間の指定)
setInterval(関数function, 一定時間の指定)
functionは関数の定義、コンマで区切って一定時間の指定（ミリ秒単位）、functionが引数をとる場合には[ ]のなかで指定します。
いきなりこの構成を全て覚えるのは難しいですが、本記事でこの後紹介するサンプルコードを見ながら、仕組みを理解していきましょう！
本記事ではこの2つのタイマー処理のうち、setTimeoutにフォーカスして解説をしていきます。
タイマー処理というのは、時間になったらプログラムを実行してくれるというものですか？
そうだね！でも、時間になったら一回だけ実行するだけでなく、その機能を応用して繰り返し処理を行うこともできるんだよ。
繰り返して実行することもできるんですね。
そうそう。ゲームなどでは必ずタイマー処理が使われてるんだよ。今回はsetTimeout関数を見てみよう！
setTimeoutでタイマー処理をおこなう
さっそく、setTimeoutでタイマー処理をおこなう方法について解説します。
まずは、簡単な関数を用意します。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
let count = 0;
const countUp = () => {
console.log(count++);
}
</script>
</body>
</html>
scriptタグの中を見てください。
ここでは最初にcountという名前の変数を宣言し、初期値として0を代入しています。
次に、countUpという名前の変数に、現在のcountの値に1を足す(count++)、という内容の関数を代入しています。
この変数countUpの処理を1,000ミリ秒後（＝1秒後）に呼び出したいとします。
その場合、次のようにsetTimeoutを追加します。
<script>
let count = 0;
const countUp = () => {
console.log(count++);
}
//1,000ミリ秒後にcountUp関数を呼び出す処理を追加
setTimeout(countUp, 1000);
</script>
setTimeoutで指定した関数は一度しか呼び出されないので、0が1,000ミリ秒後に出力されて終わりました。
setTimeoutの基本的な使い方は以上です。
次に応用編として、setTimeoutでsetIntervalのような繰り返し処理をおこなう方法を解説します。
setTimeoutでsetIntervalのような繰り返しの処理をする方法
やり方は非常に単純です。
繰り返し処理の関数のなか、つまり{ }内にsetTimeoutを記述し、countUp();で呼び出し実行します。
<script>
let count = 0;
const countUp = () => {
console.log(count++);
setTimeout(countUp, 1000);
}
countUp();
</script>
こうすることで、一度処理が終わった地点から1,000ミリ秒後にまた同じ処理を繰り返すようになります。
ブラウザで出力すると、次のようになります。
setIntervalと同じような挙動の処理になりました。
なぜsetIntervalでできる繰り返し処理を、わざわざsetTimeoutで実装したのでしょうか？
その理由は本記事の後半、「setIntervalでの繰り返し処理とsetTimeoutでの繰り返し処理の違い」で解説しています。
しかし、このままでは繰り返し処理が止まらず、カウントは半永久的に続いてしまいます。
では、繰り返し処理を指定した箇所でストップさせるにはどうしたら良いでしょう。
そのためには、clearTimeoutを追加します。
clearTimeoutでsetTimeoutの処理を停止する
まずは、変数を使ってさきほどのsetTimeout(countUp, 1000);をまとめましょう。
const timeoutId = setTimeout(countUp, 1000);
この変数timeoutIdをclearTimeoutで指定することで、setTimeoutの処理を好きなタイミングでストップさせることができます（処理を止めるからclearですね）。
<script>
let count = 0;
const countUp = () => {
console.log(count++);
const timeoutId = setTimeout(countUp, 1000);
if(count > 5){
clearTimeout(timeoutId); //timeoutIdをclearTimeoutで指定している
}
}
countUp();
</script>
上のプログラムでは、setTimeoutの繰り返し処理が実行されcountUpが5より多くなったとき（if(count > 5)）、clearTimeoutが実行されます。
よってブラウザでは、5までのカウントでストップします。
これで、setTimeoutを使って繰り返しのタイマー処理をしたり、clearTimeoutを合わせて実行を止めるといったことができるようになりました。
setIntervalでの繰り返し処理とsetTimeoutでの繰り返し処理の違い
え？ ちょっと待って！ 同じ繰り返し処理なら、わざわざsetTimeoutを使わずsetIntervalを使ってプログラムを書けばいいんじゃないの？ と思った方がいると思います。
じつは、両者には微妙な違いがあります。
- setIntervalで繰り返し処理をおこなった場合：処理開始時点から一定時間後に同じ処理を繰り返す
- setTimeoutで繰り返し処理をおこなった場合：処理終了時点から一定時間後に同じ処理を繰り返す
よって、同じ1,000ミリ秒後で時間を指定したとしても、次の処理がはじまるまでに要する時間がずれるのです。
また、処理1回分に要する時間がインターバルの時間を超えてしまうと、挙動に不具合が生じてしまいます。
処理と処理のあいだに確実に一定の余裕を保ちたいなら、setTimeoutを使うようにしましょう。
今回の記事は以上です。
入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
執筆してくれたメンター
| 高田悠（たかだゆう）
JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。 |
setIntervalとsetTimeoutの違いってあるんですか？どちらも、関数を指定して、実行する間隔を指定しますよね？
setTimeoutって基本的に次に実行するものを指定するだけなんだよね。なので、工夫して呼び出してあげないと1回の実行で終了してしまうんだ。
なるほど。setIntervalのほうはどうでしょうか？
setIntervalは、定期的な繰り返しなので、何度もsetIntervalを呼び出してしまうと、呼び出した数と同じ分だけプログラムが定期的に実行されてしまうんだ。違いを覚えておこう！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
