【JavaScript】指定された時間の経過後に指定されたコードまたは関数を非同期に実行する｜setTimeout・setInterval

JavaScript(ジャバスクリプト)

2023.08.03

この記事は約3分で読めます。

指定された時間の経過後に指定されたコードまたは関数を非同期に実行するには「setTimeout関数」「setInterval関数」が使えます。

setTimeout関数とは
setInterval関数とは
まとめ

setTimeout関数とは

JavaScriptのsetTimeout関数は、指定された時間の経過後に、指定されたコードまたは関数を非同期に実行するための方法です。

以下はsetTimeout関数の基本的な構文です。

setTimeout(callback, delay, arg1, arg2, ...)

callbackは遅延後に実行される関数または実行するコードブロックです。
delayは遅延時間をミリ秒単位で指定します。指定した時間が経過した後にcallbackが実行されます。
arg1, arg2, ...はオプションの引数で、callbackに渡す引数を指定します。

setTimeoutはタイマーを設定して、指定した時間が経過するとコールバック関数が呼び出されます。以下はsetTimeoutの使用例です。

function myFunction() {
  console.log("Hello, world!");
}
// 10秒後にmyFunctionを実行
setTimeout(myFunction, 10000);

上記の例では、10秒後にmyFunctionが呼び出され、コンソールに”Hello, world!”というメッセージが表示されます。

setTimeoutは非同期で実行されるため、指定した遅延時間が厳密に保証されるわけではありません。

ブラウザの実行状況や他のタスクの負荷によって遅延が生じる場合があります。

setInterval関数とは

setTimeoutは一度だけコールバックを実行するため、繰り返し実行する場合はsetInterval関数を使用する必要があります。

以下の例では、1秒ごとにmyFunctionが呼び出されます。

function myFunction() {
  console.log("Hello, world!");
}

// 1秒ごとにmyFunctionを実行
setInterval(myFunction, 1000);

以下の例では、1秒ごとにmyFunctionが呼び出されて画面に現在時刻を表示します。

<p id="output"></p>

<script>
function myFunction() {
  var currentDate = new Date();
  var currentTime = currentDate.toLocaleString();
  document.getElementById("output").innerHTML = currentTime;
}

// 1秒ごとにmyFunctionを実行
setInterval(myFunction, 1000);
</script>