.net column
.NET開発者のためのブログメディア

JavaScriptでのsetTimeoutの使い方|基本的な使い方からsetIntervalとの違いなどを紹介

2021年09月07日
SE
JavaScriptでのsetTimeoutはどのようなことができるのですか。
PM
setTimeoutを使用すると、指定時間後に処理を実行できます。基本的な使い方、setIntervalとの違い、引数指定などについて紹介しましょう。

JavaScriptでのsetTimeoutの使い方とは?


今回は、JavaScriptでのsetTimeoutの使い方について説明します。setTimeoutを使用すると、指定時間後に処理を実行することができます。
ここでは、
・基本的な使い方
・setIntervalとの違い
・引数指定
・イベントとの組み合せ
・複数のタイマー
・jQueryで記述
について紹介します。

JavaScriptでのsetTimeoutの使い方に興味のある方はぜひご覧ください。

基本的な使い方

setTimeoutの基本的な使い方を紹介します。実際のソースコードを見てみましょう。

実行すると、3秒後にコンソールログに「3秒経過しました。」と表示されます。このように、指定時間後に処理を実行することができます。

setTimeoutには、関数を指定することもできます。実際のソースコードを見てみましょう。

実行すると、3秒後にコンソールログに「3秒経過しました。」と表示されます。このように、指定時間後に関数を実行することができます。

setIntervalとの違い

setTimeoutとよく似た関数にsetIntervalがあります。ここでは、setTimeoutとsetIntervalの違いについて紹介します。setIntervalは指定秒数ごとに処理を実行する関数です。実際のソースコードを見てみましょう。

実行すると、3秒ごとにコンソールログに「3秒経過しました。」と表示されます。

setTimeoutは1度しか実行しませんが、setTimeoutでsetIntervalのような挙動をさせることができます。実際のソースコードを見てみましょう。

実行すると、3秒ごとにコンソールログに「3秒経過しました。」と表示されます。

引数指定

setTimeoutで関数を実行できることは紹介しました。ここでは、関数に引数を指定する方法を紹介します。関数に引数を指定するには、第3引数に指定します。実際のソースコードを見てみましょう。

実行すると、3秒後にコンソールログに「3秒経過しました。argument」と表示されます。引数が渡せていることが分かります。

イベントとの組み合せ

イベントとsetTimeoutを組み合わせることもできます。実際のソースコードを見てみましょう。

実行結果は以下のようになります。ボタンをクリックすると、3秒後にコンソールログに「ボタンをクリックしてから3秒経過しました。」と表示されます。

See the Pen
setTimeout1
by kskumd (@kskumd)
on CodePen.


このように、イベントとsetTimeoutを組み合わせることもできます。

複数のタイマー

setTimeoutを複数組み合わせることもできます。X秒後に処理Aを実行し、処理Aが終わったY秒後に処理Bを実行し、…のように非同期処理をタイマーで実現できます。実際のソースコードを見てみましょう。

実行すると、1秒後に「1秒経過しました。」、その2秒後に「2秒経過しました。」、その3秒後に「3秒経過しました。」と表示されます。
しかしながら、このソースはネストが深くて分かりづらいソースになっています。

このソースコードをシンプルにする方法として、Promiseを使用する方法があります。thenで複数連結することができます。実際のソースコードを見てみましょう。

実行すると、同じく1秒後に「1秒経過しました。」、その2秒後に「2秒経過しました。」、その3秒後に「3秒経過しました。」と表示されます。
こちらの方がシンプルなコードになります。Promiseを使用した非同期処理についてもマスターしてください。

jQueryで記述

jQueryでsetTimeout相当の挙動をさせる方法を紹介します。実際のソースコードを見てみましょう。

実行結果は以下のようになります。ボタンをクリックして3秒後にhtml要素が変更されることが分かります。

See the Pen
setTimeout2
by kskumd (@kskumd)
on CodePen.


このように、jQueryでもsetTimeout相当の挙動をさせることができます。

SE
jQueryでsetTimeout相当の挙動をさせる方法もあるのですね。
PM
はい、ご紹介したソースコードをご自身でも書いてみてください。

まとめ

いかがでしたでしょうか。JavaScriptでのsetTimeoutの使い方について説明しました。setTimeoutを使用すると、指定時間後に処理を実行することができます。
基本的な使い方から、setIntervalとの違い、引数指定、イベントとの組み合せ、複数のタイマー、jQueryで記述について紹介しました。

ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags