Search

検索したいワードを入力してください

2019年04月10日

JavaScriptのsettimeoutの使い方を解説

JavaScriptのsettimeoutの使い方について、処理を一定時間遅延させて実行させるタイマーとしての利用方法や、スライドショーなど一定時間で同じ処理を繰り返す利用方法を紹介します。動的なWebサイトや遅延処理を行いたい場合には、協力な武器になります。

settimeoutとは

JavaScriptの「settimeout」とは、一定時間後に特定の処理を行いたい場合に使用します。携帯電話のタイマー機能と基本的には考え方は同じです。Webサイトで画像が一定時間経つとスライドする場合などに利用します。

【基本的な使い方】
setTimeout(関数,時間の指定);

上記の「関数」部分には、実際に行いたい処理内容を実装した関数をセットします。また、「時間の指定」部分には、実行する時間をセットします。なお、時間の単位は「ミリ秒」であることに注意が必要です。「ミリ秒」というのは、1秒の場合は1000、5秒の場合は5000です。

JavaScriptのタイマー処理とは

JavaScriptのタイマー処理は、これまでに紹介した「settimeout」を使用する場合と、一定時間ごとに特定の処理を繰り返す「setInterval」を使用する場合があります。2種類の違いは次の通りです。

【2種類のタイマーの違い】
・setTimeout:一定時間後に特定の処理を1度だけ行う
・setInterval:一定時間ごとに特定の処理を繰り返して行う

【setIntervalの使い方】
・setInterval(関数,時間の指定);

引数の関数、時間の指定はJavaScriptの「settimeout」と同じです。時間の単位についても「ミリ秒」が単位となります。

setTimeoutでタイマー処理をする方法

それでは、実際にsettimeoutを使ったタイマー処理を紹介します。次のサンプルコードをご覧ください。

【サンプルコード】
<script>
var count = 0;
var countup = function(){
console.log(count++);
}
setTimeout(countup, 1000);
</script>

【実行結果】
0
※カウントアップの出力は1回のみです

上記のサンプルコードは、1秒後に「0」と出力されます。「settimeout」は一度のみ実行されますので、変数countに初期値としてセットされている「0」が出力されたことを表しています。

もう少し詳しく順番に紹介します。

count変数を用意する

まず、countという変数を作成しています。そして、初期値として数値の「0」をセットしています。count変数にカウントアップした数字をセットします。

console.logで出力する

JavaScriptの「console.log」を使用してログを出力します。count変数にカウントアップした値をconsole.log()にセットして数字のカウントアップごとにログを出力します。

一連の処理をcountup変数に入れる

JavaScriptでは、一連の処理をメソッド化し変数にセットすることができます。サンプルコードでは、(1)count変数に+1する処理を(2)ログ出力するという2つの一連の処理をcountup変数に入れています。変数にすることにより、settimeoutの1つ目の引数の関数としてセットしやすくなります。

最後に、JavaScriptのsettimeoutを実行します。具体的な処理としては、settimeoutの1つ目の引数に上記で作成したcountup変数をセットします。また、settimeoutの2つ目の引数に時間の指定を行います。サンプルコードでは、1000ミリ秒(=1秒)後に実行するように指定しています。

実際にサンプルコードを実行した場合、カウントは1回だけ行われ「0」と出力されます。settimeoutは特定の処理を1回のみ実行するので「0」として出力されません。

WebサイトでJavaScriptのsettimeoutを使用する場合、あまり1回のみの実行で利用することはありません。プログラミングの開発現場では、スライドショーや数字のカウントアップ処理を実装します。

次の章ではsettimeoutで繰り返し処理を行う方法を紹介します。

setTimeoutで繰り返し処理を行う方法

この章では、JavaScriptのsetimeoutで繰り返し処理を行う方法を紹介します。先ほどのサンプルコードを一部変更したものは次の通りです。

【サンプルコード】
<script>
var count = 0;
var countup = function(){
console.log(count++);
// 1000ミリ秒後にcountupを実行
setTimeout(countup, 1000);
}
// countupを呼ぶ
countup();
</script>

【実行結果】
0
1
2
3
4
5...
※ カウントアップはずっと続きます

JavaScriptのsettimeoutで繰り返し処理を行うサンプルコードは、1(1000ミリ)秒後にログ出力するcountup変数を繰り返し実行します。

settimeoutで一回のみ処理を行うサンプルコードと比較して異なる箇所は、2点あります。1つ目が、countup変数にセットするメソッドの処理に「setTimeout(countup, 1000);」を追加している部分です。処理を行うメソッドの中に、countupを呼ぶ処理を追加することで1(1000ミリ)秒後に実行される処理を指定します。

そうすることで、countup()をループして実行されることになります。そして、count変数に1が加算されることでカウントアップします。

countup();で呼び出し実行する

異なる点の2つ目が、サンプルコードの最後の箇所を「countup();」にすることによって、カウントアップ処理のスタートさせることができます。注意点としては、countup変数をセットする前に「countup();」を呼び出しても処理は開始されません。理由としては、countupの内容がセットされる前に呼び出されても実行されるものがないためです。

【正しく処理されないサンプルコード】
<script>
var count = 0;
countup(); // ← 先に呼び出しを行なっても正しく処理されません
var countup = function(){
console.log(count++);
// 1000ミリ秒後にcountupを実行
setTimeout(countup, 1000);
}
</script>

setIntervalでの処理とsetTimeoutでの処理の違い

JavaScriptの「setInterval」での処理は、「一定時間ごとに特定の処理を繰り返して行う」です。そのため、「settimeout」を利用して繰り返し処理を行う方法と同じではないかという疑問が浮かびますが、両者は少し違います。

【setIntervalとsetTimeoutの違い】
・setTimeoutで繰り返し処理:「処理終了時点から」一定時間後に特定の同じ処理を繰り返す
・setIntervalで繰り返し処理:「処理開始時点から」一定時間後に特定の同じ処理を繰り返す

両者の違いは、次に実行する処理の開始時点が違う点です。1000ミリ秒後の時間を指定した場合でも、次の処理が開始されるタイミングがズレることになります。1000ミリ秒程度では分かりにくいですが、指定する時間が長くなれば違いが明確になります。

また、settimeoutの繰り返し処理をsetIntervalを利用して行う場合、1つの処理にかかる時間がインターバルで指定する時間を超えると期待する実行処理が行われないため、正確に一定時間の繰り返し処理を行いたい場合にはsettimeoutの利用をオススメします。

まとめ

JavaScriptのsettimeoutの使い方を紹介しましたが、動的なWebサイトを作りたい場合やJavaScriptの遅延処理を行いたい場合など利用するケースも幅広いため、settimeoutを使えるようにしておけばメリットは大きいと言えます。ぜひ参考にして修得してください。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related