【JavaScript】setTimeout()で一定時間後に処理を行う!

(この記事は2022年11月23日に投稿されました。)

JavaScriptで一定時間後に処理を実行する方法としてsetTimeout()があります。

setTimeout()とは、処理を遅延して実行するメソッドになります。

しかし、setTimeout()にコールバック関数を指定して使用すると通常の処理と変わりませんので注意してください。

しかし、パラメータを追加することで遅延の時間を指定して関数を実行することができたり、別の変数を引数として使用することができます。

また、setTimeout()を入れ子状態で使用すると、「Aの処理のn秒後にBの処理を実行する」というように遅延の処理を連続して行うこともできます。

そのため、「時間差で処理を実行したい場合」や「ページの読み込み完了後に処理を行いたい場合」にetTimeout()を使用することをおすすめします。

今回はJavaScriptのsetTimeout()で一定時間後に処理を行う方法について紹介していきます。

この記事はこんな方におすすめ
・遅延して処理を実行したい場合
・ページの読込の完了後に処理を実行したい場合




setTimeout()とは

setTimeout()とは処理を遅延して実行するメソッドとなります。

普通の関数はコードを読み込んだ瞬間に実行されますが、setTimeout()はコードを読み込んだとしても、指定した時間後に処理が実行されるようになります。

setTimeout()の処理イメージ

setTimeout()の書き方

setTimeout()の書き方は下記のようになります。

setTimeout()追記し、()の中にパラメータを指定します。

また、アロー関数を使って下記のように記載することも可能です。

setTimeout()のパラメータ

setTimeout()パラメータは下記のようになります。

  1. コールバック関数(必須):
    行う処理の内容を関数で指定する
  2. 遅延時間(任意):
    実行する関数の遅延時間をミリ秒で指定する
  3. 引数(任意):
    処理内で使用する引数を指定する

setTimeout()は必須パラメータとして、コールバック関数を指定します。

また、任意なパラメータとして、時間間隔引数を指定することができます。

setTimeout()の返り値

setTimeout()の返り値は「setTimeout()で実行した遅延処理のID(1から振られる)」となります。

setTimeout()で一定時間後に処理を行うサンプルコード

setTimeout()で一定時間後に処理を行うサンプルコードをご紹介します。

⚫︎ Main.js

実行結果

setTimeout()で一定時間後に処理を行った結果

setTimeout()で一定時間後に処理が行われています。

そのため、「処理結果-1」と「処理結果-2」が遅れて表示されています。

Sossy

基本的な関数と同じように見えますが、表示されている順番を見ると、遅れて表示されていることがわかります。

setTimeout()で遅延時間を指定して一定時間後に処理を行う場合

setTimeout()で遅延時間を指定して一定時間後に処理を行う場合は、第2パラメータに「遅延時間」を指定します。

遅延時間を指定すると、一定時間後の時間を設定して処理を行うことができます。

⚫︎ Main.js

実行結果

setTimeout()で遅延時間を指定して一定時間後に処理を行った結果

setTimeout()で遅延時間を指定して一定時間後に処理が行われています。

そのため、「処理結果-1」が1秒後に、「処理結果-2」が2秒後に遅れて表示されています。

setTimeout()で引数を指定して一定時間後に処理を行う場合

setTimeout()で引数を指定して一定時間後に処理を行う場合は、第3パラメータに「引数」を指定します。

引数を指定すると、setTimeout()の処理内で別の変数の値を使用することができます。

引数を1つ指定する場合

引数を1つ指定する場合にsetTimeout()を使用します。

⚫︎ Main.js

実行結果

setTimeout()で引数を1つ指定して一定時間後に処理を行った結果

setTimeout()で引数を1つ指定した状態で一定時間後に処理が行われています。

そのため「処理実施-1」と「引数その1」、「処理実施-2」と「引数その1」が遅延して表示されています。

引数を複数指定する場合

引数を複数指定する場合にsetTimeout()を使用します。

⚫︎ Main.js

実行結果

setTimeout()で引数を複数指定して一定時間後に処理を行った結果

setTimeout()で引数を2つ以上指定した状態で一定時間後に処理が行われています。

そのため「処理実施-1」と「引数その1」と「引数その2」と「引数その3」、「処理実施-2」と「引数その1」と「引数その2」と「引数その3」が遅延して表示されています。

setTimeout()の処理を解除する場合

setTimeout()の処理を解除する場合はclaerTimeout()を使用します。

clearInterval()は、setTimeout()で呼び出されたメソッドを途中で終了させることができるメソッドになります。

setTimeout()での処理内にclearInterval()を使用することで、遅延中に処理を途中で終了させることができるようになります。

⚫︎ Main.js

実行結果

clearTimeout()でsetTimeout()の処理を解除した結果

clearTimeout()でsetTimeout()の処理が中止されています。

そのため「処理実施-1」と「処理実施-2」が表示されずに処理が終了しています。

setTimeout()を使用した様々なケース

setTimeout()は、さまざまな場面で使用することができます。

そのためここでは、setTimeout()を使用できるケースについてご紹介します。

今回ご紹介するケースは下記の2つとなります。

  1. 時間差で処理を実行する場合
  2. ページの読み込み完了後に処理を実行する場合

時間差で処理を実行する場合

時間差で処理を実行する場合にsetTimeout()を使用することができます。

⚫︎ index.html

⚫︎ Main.js

実行結果

setTimeout()で時間差で処理を実行した結果

setTimeout()によって時間差で処理を実行されています。

そのため、2秒後にアラートが表示されています。

ページの読込み完了後に処理を実行する場合

ページの読込み完了後に処理を実行する場合にsetTimeout()を使用することができます。

ページの読み込みが完了していない状態で処理を実行すると、指定した要素が存在しないためエラーになることがあります。

そのため、ページの読み込んでから処理を実行することができるよう、setTimeout()でわざと遅延させて処理を実行させることができます。

⚫︎ index.html

⚫︎ Main.js

実行結果

setTimeout()でページの読込み完了後に処理を実行した結果

setTimeout()によってページの読込の完了後に処理が実行されています。

そのため、「文字が変更されます。」という文字列から「文字が変更されました。」という文字列に変更されています。

逆に、下記のようにdisplay()で定義しているsetTimeout()の遅延時間を3秒にすると下記のような結果になります。

実行結果

要素の表示が3秒後に表示されるため、要素を読み込むことができず、テキストの変更が行われていません。

つまり、setTimeout()を使用することで、対象の要素の読み込みが遅くても読み込みが完了するまで待つことができます。

setTimeout()を入れ子にして使用する場合

setTimeout()は入れ子にして使用することもできます。

そもそも入れ子とは、ある処理の中にそれと同じ処理を入れた構造となります。

つまり、setTimeout()の処理内にsetTimeout()の処理が入っている状態です。

もし、大外のsetTimeout()の処理をAとし、入れ子のsetTimeout()の処理をBとした場合、下記のような処理順となります。

  1. Aの処理がn秒後に実行
  2. Aの処理が実行されたm秒後にBの処理を実行

大外のsetTimeout()の処理が先に行われ、そのあとに入れ子のsetTimeout()の処理が実行されます。

以上のことから、Bの処理を実行するのにかかる時間はn+m秒後となります。

試しにサンプルコードを使って入れ子状態のsetTimeout()を実行します。

⚫︎ Main.js

実行結果

setTimeout()を入れ子にして使用した結果

setTimeout()によって入れ子の状態で処理が行われています。

そのため、「処理実施-1」の1秒後に「処理実施-1_1」が表示されています。

そして、「処理実施-2」の1秒後に「処理実施-2_1」が表示され、その1秒後に「処理実施-2_2」が表示されています。

一定時間ごとに処理を行う場合

一定時間ごとに処理を行う場合はsetInterval()を使用します。

setInterval()とは指定した時間の間隔で関数の処理を実行することができるメソッドになります。

⚫︎ Main.js

実行結果

setInterval()で一定時間ごとに処理を行った結果

setInterval()で一定時間ごとに処理が行われています。

そのため「処理実施中-1」が1.5秒間隔で、「処理実施中-2」が1秒間隔で何回も表示されています。

もし、setInterval()について詳しく知りたい場合は下記の記事をご参考下さい。

まとめ

● setTimeout()とは処理を遅延して実行するメソッドである

● setTimeout()は下記のパラメータを指定して使用することができる
・コールバック関数(必須)
・時間間隔(任意)
・引数(任意)

⚫︎ コールバック関数のみ指定してsetTimeout()を使用すると一定時間後に処理が行われる

⚫︎ 遅延間隔を指定してsetTimeout()を使用すると、遅延の時間を自分で設定して処理を行うことができる

⚫︎ 引数を指定してsetTimeout()を使用すると、処理内に他の変数を使用することができる
(1つだけでなく複数指定してもOK)

⚫︎ setTimeout()の処理を解除するにはclaerTimeout()を使用する

⚫︎ setTimeout()は、下記のようなさまざまな場面で使用することができる
・時間差で処理を実行する場合
・ページの読込み完了後に処理を実行する場合

⚫︎ setTimeout()を入れ子の状態で使用すると、連続でsetTimeout()の処理が行われる
(大外のsetTimeout() → 内側のsetTimeout()の順で処理が行われる)

⚫︎ 一定時間ごとに処理を行う場合はsetInterval()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です