JavaScriptのsetTimeout関数による遅延実行の手引き

JavaScriptでは、一定の時間が経過した後に特定のコードを実行する場合、setTimeout関数がよく用いられます。今回の記事では、このsetTimeout関数の使い方とその具体的な例を詳細に解説します。

setTimeout関数とは?

setTimeoutは、指定した時間が経過した後に特定の関数を実行するための組み込み関数です。以下はその基本的な構文です。

setTimeout(function, milliseconds, param1, param2, ...);
  • function: 実行したい関数
  • milliseconds: 遅延時間(ミリ秒単位)
  • param1, param2, …: 遅延実行する関数に渡したい任意の引数

基本的な使用例

以下の例では、2000ミリ秒(2秒)後に’Hello, World!’というアラートを表示します。

setTimeout(function() {
  alert('Hello, World!');
}, 2000);

既存の関数を指定する方法

setTimeoutに渡す関数は、無名関数でなくても大丈夫です。既に定義されている関数を指定することも可能です。

function greet(name) {
  alert('Hello, ' + name + '!');
}

setTimeout(greet, 1500, 'John');

この例では、greet関数を1500ミリ秒(1.5秒)後に実行し、その際に’John’という引数を関数に渡します。

ES6のアロー関数を利用する場合

ES6のアロー関数を使うことで、コードをよりシンプルに書くことができます。

setTimeout(() => {
  alert('Hello, World!');
}, 2000);

タイマーのキャンセル

setTimeoutは、IDを返します。このIDをclearTimeout関数の引数として使うことで、タイマーをキャンセルすることができます。

let timerId = setTimeout(() => alert('Hello'), 2000);
clearTimeout(timerId);

この例では、setTimeoutがスケジュールした関数の実行をキャンセルしています。したがって、’Hello’というアラートは表示されません。

注意点

setTimeoutは、指定した時間が経過した後に関数を実行することを保証するものではありません。これは、指定された時間が経過した後に関数の実行をスケジュールしますが、他の処理が実行中の場合は、指定した時間よりも後に実行される可能性があります。

まとめ

setTimeout関数は、非常にシンプルだが強力な関数です。適切に使いこなすことで、様々なタイミングでコードを実行することが可能になります。用途は広く、例えばユーザーに通知を表示するタイミングを制御したり、一定の間隔でデータを更新するような場面で活躍します。