JavaScript のタイマー

1. JavaScript で setTimeout() を使用してタイマーを作成する
2. JavaScript で setInterval() を使用してタイマーを作成する

JavaScript は、非ブロッキングコードを実行するための 2つのタイマー関数を提供します。JavaScript は、関数 setTimeout() および setInterval() を提供します。これらは、指定された式または関数を特定の時間間隔の後に実行します。

今日の記事では、JavaScript タイマーについて詳しく説明します。

JavaScript で setTimeout() を使用してタイマーを作成する

これは JavaScript が提供する非同期関数であり、タイマーの期限が切れた後に特定の関数またはコードのセクションを実行します。ネストされたタイムアウト、非アクティブなタブでのタイムアウト、追跡スクリプトの調整、ページの読み込み中のタイムアウトの延期など、さまざまな理由でタイムアウトが遅延します。

JavaScript での setTimeout() の構文

setTimeout(function [, delay, arg1, arg2, ...]);
setTimeout(code[, delay]);

パラメータ

• function：これは必須パラメーターです。時間が経過した後に実行する機能を指定します。
• code：これは必須のパラメーターです。ユーザーが関数を渡さない場合、ユーザーは関数の代わりに文字列を渡すことができます。
• delay：これはオプションのパラメーターです。このパラメーターは、指定されたコードまたは関数を実行する前に、ミリ秒単位のタイマーとして数値を受け入れます。値が渡されない場合、デフォルト値は 0 であり、これによりすぐに実行が行われます。
• arg1, ..., argN：これはオプションのパラメータです。関数が渡された場合、関数の値を追加の引数として渡すことができます。

戻り値

この setTimeout() メソッドは、タイマーの識別に役立つ正の timeoutID を返します。この値は、clearTimeout() に使用できます。

コード例：

<button onclick="setTimeoutFunction()">Try set Timeout</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setTimeoutFunction() {
  setTimeout(addFn, 5000, 5, 10);
}

出力：

15

JavaScript で setInterval() を使用してタイマーを作成する

setInterval() メソッドは JavaScript によって提供されます。このメソッドは、worker および window インターフェースで提供されます。関数を繰り返し呼び出すか、コードのセクションを実行します。このコードは、各呼び出し間の固定時間遅延で実行されます。

setInterval() 関数と setTimeout() 関数の唯一の違いは、setInterval() が各呼び出しの間に遅延を伴って関数を繰り返し呼び出すのに対し、setTimeout() は遅延後に関数を実行することです。

JavaScript での setTimeout() の構文

setInterval(function [, delay, arg1, arg2, ...]);

パラメータ

• function：これは必須パラメーターです。時間が経過した後に実行する機能を指定します。
• code：これは必須のパラメーターです。ユーザーが関数を渡さない場合、ユーザーは関数の代わりに文字列を渡すことができます。
• delay：これはオプションのパラメーターです。このパラメーターは、指定されたコードまたは関数を実行する前のミリ秒単位のタイマーとして機能する数値を受け入れます。値が渡されない場合、0 がデフォルトであり、すぐに実行されます。
• arg1, ..., argN：これはオプションのパラメータです。関数が渡された場合、関数の値を追加の引数として渡すことができます。

戻り値

この setInterval() メソッドは、タイマーの識別に役立つ正の intervalID を返します。この値は、clearInterval() に使用できます。

コード例：

<button onclick="setIntervalFunction()">Try set Interval</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setIntervalFunction() {
  setInterval(addFn, 5000, 5, 10);
}

出力：

15