JavaScript setTimeout 一定時間の経過後に処理を行う

nas

JavaScriptのsetTimeoutメソッドで、一定時間の経過後に処理を行うサンプルです。

目次

サンプル 一定時間の経過後に実行(setTimeout)
  関数を指定 / 変数を指定 / 関数に引数を渡す
  関数側にsetTimeoutを配置 / アロー関数を使用
  タイマーを停止する(clearTimeout)

一定時間の経過後に実行(setTimeout)

変数 = setTimeout(関数名,ミリ秒 [,引数...])
  • 指定したミリ秒の経過後、関数が1度実行されます。1000ミリ秒は、1秒です。
  • 3つめ以降の引数は、1つめの関数に渡す引数を指定できます。
  • setTimeoutメソッドの戻り値は、タイマーを識別する数値を返します。
    →タイマーの停止で使用します。

関数を指定

<script>
  function proc1() {
    console.log("2秒経過しました");
  }
  setTimeout(proc1, 2000);
</script>

5行目のsetTimeoutメソッドは、2行目の関数proc1を引数にしています。
proc1の後ろにかっこ()は不要です。2000ミリ秒後(2秒後)に実行します。

変数を指定

<script>
  const proc1 = function () {
    console.log("2秒経過しました");
  };
  setTimeout(proc1, 2000);
</script>

2～4行目の関数を2行目の変数proc1に代入しています。
5行目のsetTimeoutメソッドは、変数proc1を引数にしています。

関数に引数を渡す

<script>
  const proc1 = function (str1) {
    console.log(str1 + "経過しました");
  };
  setTimeout(proc1, 2000, "2秒が");
</script>

setTimeoutの3つめの引数が関数に渡されます。
引数を増やす場合は、カンマ区切りで増やしていきます。

関数側にsetTimeoutを配置

<script>
  const proc1 = function () {
    setTimeout(function () {
      console.log("2秒経過しました");
    }, 2000);
  };
  proc1();
</script>

3行目は、関数側にsetTimeoutがあります。

アロー関数を使用

<script>
  const proc1 = () => setTimeout(() => console.log("2秒経過"), 2000);
  proc1();
</script>

上記の「関数側にsetTimeoutを配置」のコードをアロー関数にした場合です。
functionとブロック{}を削除しアロー(=>)を追加しました。

以下はMDNのsetTimeoutメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

 

タイマーを停止する(clearTimeout)

clearTimeout (setTimeoutの戻り値)
  • setTimeoutメソッドで開始された処理を停止します。
  • 引数は、setTimeoutメソッドの戻り値です。
<script>
  const proc1 = function () {
    console.log("2秒経過しました");
  };
  const timeoutID = setTimeout(proc1, 2000);
  clearTimeout(timeoutID);
</script>

5行目は、setTimeoutメソッドの戻り値を変数のtimeoutIDに代入しています。
6行目は、clearTimeoutメソッドでタイマー処理を停止します。
結果として3行目の文字列は出力されません。

以下はMDNのclearTimeoutメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout

関連の記事

JavaScript setInterval 一定間隔で処理を繰り返す

△上に戻る