【JavaScript】 setTimeoutメソッドについて徹底解説！

setTimeoutメソッドは、指定された時間の後に、関数を一度だけ実行するメソッドです。

1
setTimeout(関数, 時間);

setTimeoutメソッドの基礎情報

リンクをコピーしました

この章では、setTimeoutメソッドの基礎情報について解説します。

setTimeoutメソッドの基本的な使い方

リンクをコピーしました

setTimeoutメソッドは、指定された時間の後に、関数を一度だけ実行するタイマーのような働きをするメソッドです。
JavaScriptでは基本的に上から順番にコードが処理されますが、setTimeoutを使うことで意図したタイミングで処理を実行することができます。そのため非同期処理を扱う際に非常に便利です。

以下が基本的な書き方です。

1
setTimeout(関数, 時間);

時間の部分はミリ秒単位の時間を入れます。1秒は1000ミリ秒になります。
この時間が経過した後に第1引数で指定した関数が実行されます。

以下が書き方の例です。

1
2
3
4
setTimeout(function() {
  console.log('こんにちは');
}, 1000); 
// 1秒（1000ミリ秒）後に 'こんにちは' を出力

setTimeoutの引数に直接関数を書いてしまうと可読性が落ちるので、以下のように関数を定義して呼び出す方がスッキリします。

1
2
3
4
5
6
function sayHello() {
  console.log('こんにちは');
}

setTimeout(sayHello, 1000);
// 1秒（1000ミリ秒）後に 'こんにちは' を出力

注意点として関数の呼び出し時には()を付与しません。
()をつけてしまうとすぐに処理されてしまいます。

引数付き関数の場合は引数は以下のように第3引数に渡します。

1
2
3
4
5
6
function greet(name) {
  console.log('こんにちは ' + name + 'さん');
}

// 1.5秒（1500ミリ秒）後に 'こんにちは田中さん' を出力
setTimeout(greet, 1500, '田中');

複数の引数を渡す場合も、同様に第4引数、第5引数...と続けて渡します。

1
2
3
4
5
6
function greet(firstName, lastName) {
  console.log('こんにちは ' + firstName + ' ' + lastName + 'さん');
}

// 2秒（2000ミリ秒）後に 'こんにちは山田太郎さん' を出力
setTimeout(greet, 2000, '山田', '太郎');

タイマーのキャンセル方法

リンクをコピーしました

setTimeoutは返り値として一意のIDを返します。このIDをclearTimeoutの引数に渡すことでタイマーをキャンセルすることができます。

1
2
3
4
5
6
let timerId = setTimeout(function() {
  console.log('キャンセルされます');
}, 3000);

// タイマーをキャンセル
clearTimeout(timerId); 

以下はスライドの自動再生・停止の時に使っている例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// HTML要素 'slider' を取得し、変数 slider に格納
const slider = document.getElementById('slider');
let timeoutId;  // 自動再生の間隔を管理するための変数 timeoutId を宣言

// スライドの自動再生を開始する関数
function startAutoPlay() {
  // 次のスライドへ移動し、再び startAutoPlay を 2秒後に呼び出す
  timeoutId = setTimeout(() => {
    nextSlide();  // 次のスライドへ移動
    startAutoPlay();  // 再帰的に startAutoPlay を呼び出す
  }, 2000);
}

// スライダーがタッチされたときに自動再生を停止する
slider.addEventListener('touchstart', () => {
  // setTimeout で設定された自動再生を停止
  clearTimeout(timeoutId);
});

// スライダーからタッチが離れたときに自動再生を再開する
slider.addEventListener('touchend', () => {
  // 自動再生を再開するために startAutoPlay 関数を呼び出す
  startAutoPlay();
});

setTimeoutメソッドの応用的な使い方

リンクをコピーしました

この章では、setTimeoutメソッドの応用的な使い方について解説します。

再帰的呼び出し

リンクをコピーしました

再帰的なsetTimeoutは、setTimeoutのコールバック関数内で再度setTimeoutを呼び出すことで、指定した時間ごとに関数を繰り返し実行する方法です。

次の例では、1秒ごとにコンソールにメッセージを出力する関数を再帰的に呼び出しています。そのため、1秒ごとに出力処理が繰り返し実行されます。

1
2
3
4
5
6
7
8
9
function printMessage() {
  console.log('このメッセージは1秒ごとに出力されます');

  // 1秒（1000ミリ秒）後に自身を再度呼び出す
  setTimeout(printMessage, 1000);
}

// 初回の呼び出し
setTimeout(printMessage, 1000);

このままだと永久に出力処理が行われるので、あるタイミングで止めたいときは先ほどのclearTimeoutを使いましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let timerId; // タイマーIDを格納する変数

function printMessage() {
  console.log('このメッセージは1秒ごとに出力されます');

  // 1秒（1000ミリ秒）後に自身を再度呼び出す
  timerId = setTimeout(printMessage, 1000);
}

// 1分後にタイマーをクリアする
setTimeout(() => {
  clearTimeout(timerId);
}, 60000);

// 初回の呼び出し
printMessage();

setIntervalとの違い

リンクをコピーしました

setTimeoutと似たメソッドにsetIntervalがあります。setTimeoutが指定された時間の後に一度だけ関数を実行するのに対してsetIntervalは指定した時間ごとに関数が繰り返し実行されます。

1
2
3
4
5
6
function printMessage() {
  console.log('このメッセージは1秒ごとに出力されます。');
}

// 1秒（1000ミリ秒）ごとに `printMessage` を実行
setInterval(printMessage, 1000);

再帰的にsetTimeoutを使うことと同じことをしています。

どちらも同じ挙動をしているように見えますが、厳密には違いがあります。setIntervalを使用すると、指定された時間間隔ごとに処理が繰り返し実行されるのに対し、setTimeoutを使用する場合は、次の処理は前の処理が完了してから実行されます。

つまり、setIntervalを使用した場合、指定された時間間隔ごとに処理が実行されるため、前の処理がまだ完了していない場合でも次の処理が開始されてしまい、処理が重複する可能性があります。それに対して、setTimeoutを使用した場合、前の処理が完了するまで次の処理が待機するため、処理の重複は発生しません。

確実に前の処理を終えてから次の処理を実行したい場合は、setTimeoutを使いましょう。

setTimeoutを使った方が良い例

リンクをコピーしました

例えば、外部のAPIからデータを定期的に取得し、それを処理して表示するアプリケーションを考えてみましょう。データ取得には一定の時間がかかるため、次のデータ取得のタイミングに影響を与える可能性があります。

以下はsetIntervalを使った場合のコードです。

1
2
3
4
5
6
function fetchData() {
  console.log("データを取得中...");
  APIを呼び出し、データを取得するコード
}

setInterval(fetchData, 1000); // 1秒ごとにデータを取得しようとする

この例では、fetchData関数が1秒ごとに呼び出されますが、データ取得の処理に1秒以上かかってしまうと次の問題が発生します。

• データ取得がまだ完了していない状態で次のデータ取得が開始される。
• 処理が重複し、サーバーへのリクエストが過剰になる可能性がある。

次はsetTimeoutを使ったコードです。

1
2
3
4
5
6
7
function fetchData() {
  console.log("データを取得中...");
  APIを呼び出し、データを取得するコード
  setTimeout(fetchData, 1000); // データ取得が完了してから1秒後に次の呼び出し
}

fetchData(); // 初回の呼び出し

この例では、fetchData関数が再帰的に呼び出されます。データ取得の処理が完了してから次の呼び出しがセットされるため、以下のようなメリットがあります：

• 前のデータ取得が完了するまで次のデータ取得が開始されない。
• 処理が重複せず、サーバーへのリクエストが適切に制御される。

このように、APIからのデータ取得といったケースのような、繰り返しに指定した時間より、関数内での処理時間が長くなる可能性がある場合などでは、setTimeoutを使うのがよいでしょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ