【JS】setTimeoutの使い方をわかりやすく解説

今回はJavaScriptのsetTImeoutについて解説します。

setTimeoutとは

setTimeout は、JavaScript で指定した遅延時間（ミリ秒単位）後に関数を一度だけ実行するために使用されるグローバル関数です。

「一度だけ実行する」というのが結構ポイントです。

setTimeoutの使い方

setTimeoutの基本的な使い方は以下のような感じです。

setTimeout(実行したい関数, 遅延させる時間, [引数1, 引数2, ...]);

サンプルとして、３秒後にconsoleに「Hello World!!」と出力する簡単なコードをつくると以下のようになります。

setTimeout(() => {
  console.log("Hello, World!");
}, 3000); // 3000ミリ秒 = 3秒

遅延させる指定の秒数は、3秒なら3000とミリ秒単位で指定します。

とやってしまうとものすごい一瞬しか遅延しないので必ずミリ秒で指定するということを覚えておいてください。

setTimeoutを使うケース

ところで、setTimeoutってどんなところで使うのでしょうか？

色々あるんですが、今回は２つくらいありそうなケースを紹介します。

①非同期のデータ処理のデモ

非同期処理のデモや、特定のデータが利用可能になるのを模倣する場合に setTimeout を使用できます。

例えば、APIからのデータフェッチ後に何かを実行する場合に、その処理を遅延させるために使うことがあります。

setTimeout(() => {
  // APIからのデータフェッチが完了したと仮定して処理
  console.log("データフェッチ完了");
}, 2000);

②UIの更新

ユーザーインターフェイス（UI）の更新やアニメーションにおいて、特定の遅延後に要素を表示または非表示にするために setTimeout を使います。

setTimeout(() => {
  document.getElementById("loading").style.display = 'none';
}, 2000); // ローディングアイコンを2秒後に非表示にする

一度ローディングアイコンを表示させて、指定の秒数後に非非常にしたい時などに使えますね。

setTimeoutは一度だけ、setIntervalは繰り返す

setTimeoutは指定した秒数遅延させたあとに、一度だけ関数を実行するものです。

数秒間隔で繰り返し処理を行いたい場合には、setIntervalを使用してください。

setIntervalを使うとこんな感じ↓

setInterval(() => {
  console.log("このメッセージは毎秒表示されます。");
}, 1000); // 1000ミリ秒 = 1秒

setIntervalの詳しい使い方についてはまた別記事で解説したいと思います。

setTimeoutの使い過ぎはよくない場合も

setTimeoutはどんなシーンでも万能というわけではありません。

もしプログラムのソースコード内でsetTimeoutを多用すると、それなりのデメリットも生じます。

setTimeoutを多用するデメリット

①パフォーマンスの低下

setTimeout を多用すると、多数のタイマーが同時に動作することでブラウザのパフォーマンスが低下する可能性があります。特にモバイルデバイスやリソースが限られている環境で顕著にあらわれます。

②メモリ使用の増加

未解決の setTimeout が多いと、それらが保持するスコープとクロージャによってメモリ使用量が増加する可能性があります。

③コードの可読性と保守性が下がる

setTImeoutを使った時間に依存するロジックが多くなると、コードのフローを追いにくくなり、バグの原因となりやすくなります。

④時間の正確性の問題

JavaScriptの setTimeout は正確な時間を保証しないため、短い間隔で多用すると、予定より遅れたり、正しくない時間計算になる場合があります。

目的にあった遅延方法を選ぶのがいい

setTimeoutは指定の秒数遅延させる方法ですが、

APIのフェッチやクリックに応じて動くようにしたいなど、様々に目的や条件があると思います。

APIのデータ取得が完了したら動く、というプログラムにしたければPromiseを使ったり、async/awaitを使用するべきです。

また、クリックイベントやスクロールに応じて何かの処理をさせるならaddEventListenerなどを使うといいでしょう。

どういうプログラムを書くのかによって、目的にあった適切な遅延方法やメソッドを利用しましょう。

まとめ

setTimeoutは指定した秒数遅延させたあと一度だけ関数を実行するもの