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

nas2017/04/06

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

目次

サンプル 一定時間の経過後に実行(setTimeout)
  setTimeoutのサンプル
  関数に引数を渡す場合
  関数側にsetTimeoutを配置
  アロー関数を使用

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

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

setTimeoutのサンプル

開始ボタンを押すと1秒ごとに文字列が出力されます。
停止ボタンを押すと定期処理が停止します。

<input type="button" value="開始" onclick="clickBtn1()" />
<input type="button" value="停止" onclick="clickBtn2()" />
<script>
  let timer1;
  function clickBtn1() {
    if(timer1){
      clickBtn2();
    }
    timer1 = setTimeout(proc1, 3000);
  }
  proc1 = function () {
    console.log("3秒経過しました");
  };
  function clickBtn2() {
    clearTimeout(timer1);
  }
</script>

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

clearTimeout (setTimeoutの戻り値)

15行目のclearTimeoutメソッドは、setTimeoutメソッドで開始された処理を停止します。
引数は、setTimeoutメソッドの戻り値です。
6,7行目はすでにタイマーが動いていたときは停止します。

 

関数に引数を渡す場合

<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

関連の記事

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

△上に戻る