JavaScriptでsetTimeout（）とsetInterval（）を使用してタスクをスケジュールする方法

序章

setTimeout()とsetInterval()はどちらも、ドキュメントオブジェクトモデルのグローバルオブジェクトの組み込みメソッドであり、設定された時間にタスクをスケジュールします。setTimeout()は、渡された関数を1回呼び出します。 setInterval()が指定された時間に継続的に呼び出している間、指定された遅延。 JavaScriptはシングルスレッド言語であるため、どちらの方法でもコードを非同期で実行できます。

この記事では、JavaScriptプロジェクトにsetTimeout()とsetInterval()を実装する方法について学習します。

setTimeout()を適用する

setTimeout()メソッドは、コールバック関数とミリ秒単位の遅延の2つの引数を受け入れ、関数を1回呼び出します。

index.jsファイルで、setTimeout()メソッドを実装し、最初の引数として無名関数を渡し、2番目の引数としてミリ秒単位の数値を渡します。

index.js

setTimeout(() => {
  console.log('Hello World!');
}, 1000);

1000ミリ秒（1秒に相当）の遅延の後、コンソールは文字列Hello World!を出力します。

関数をグローバルに定義し、最初の引数としてsetTimeout()に渡すこともできます。

index.jsファイルで、グローバルスペースで関数を定義し、setTimeout()メソッド内で関数ラベルを渡します。

index.js

function greeting() {
  console.log('Hello World!');
}

setTimeout(greeting, 1000);

1秒の遅延の後、コンソールは文字列Hello World!をログアウトします。

注：setTimeout()に渡した関数を呼び出さないでください。 代わりに、最初の引数として関数ラベルを挿入します。

setTimeout()メソッドは、追加のオプションの引数を取り、指定された遅延の後にこれらをコールバック関数に渡すことができます。 index.jsファイルで、setTimeout()メソッドに追加の引数を適用します。

index.js

function animal(animalName, punctuation = '.') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);

  console.log(`${name}`${punctuation});
}

setTimeout(animal, 2500, 'shark', '!');

2.5秒後、コンソールはメッセージShark!を出力します。 setTimeout()メソッドの追加の引数は、animalコールバック関数のデフォルトの引数をオーバーライドします。

setTimeout()メソッドを確認したので、JavaScriptで非同期呼び出しを作成する別の方法を見てみましょう。

setInterval()を適用する

setTimeout()と同様に、setInterval()メソッドは、コールバック関数とミリ秒単位の遅延の2つの引数を受け入れます。 このメソッドは、コールバック関数に渡す追加の引数も受け入れます。 違いは、setInterval()メソッドがコールバック関数を定期的に呼び出し、呼び出しの間に指定された遅延があることです。

index.jsファイルで、数値をインクリメントして値をログに記録する関数を定義します。

index.js

let i = 0;

function increment() {
  i++;
  console.log(i);
}

setInterval(increment, 1000);

setInterval()メソッドに渡されたincrementコールバック関数は、コードを1秒ごとに繰り返し実行し、後続の各番号をコンソールに出力します。

Output1
2
3
...

setInterval()は、コールバック関数への連続する呼び出しごとに遅延を適用するため、setTimeout()でメソッドを使用する場合を考えてみましょう。

setTimeout()を再帰的に使用する

指定した遅延の開始をより細かく制御するには、setInterval()の代わりにsetTimeout()メソッドを再帰的に使用できます。 setTimeout()への再帰的アプローチにより、タスクは遅延の開始を完全に制御できます。

index.jsファイルで、数値をインクリメントし、再帰的なsetTimeout()メソッドを適用する関数を定義します。

index.js

let i = 0;

function increment() {
  i++;
  console.log(i);
}

let timer = setTimeout(function myTimer() {
  increment();
  timer = setTimeout(myTimer, 1000);
}, 1000);

setTimeout()メソッドの最初の呼び出しの本体内で、コールバック関数myTimerを定義する方法に注目してください。 変数timerは、その値をsetTimeout()メソッドの2番目の呼び出しに再割り当てし、メソッドを呼び出してmyTimer関数を最初の引数として渡すときに再帰的アプローチを作成します。 両方のsetTimeout()メソッドには1000の2番目の引数があるため、再帰呼び出しごとに、コンソールは遅延なしで増分された数値をログに記録します。

両方のメソッドを統合するためのアプローチを分析したので、呼び出しを終了する方法を調べてみましょう。

clearTimeout()およびclearInterval()を使用する

setTimeout()メソッドをキャンセルするには、setTimeout()呼び出しの本文内で渡されたclearTimeout()メソッドを使用できます。 clearTimeout()メソッドは、引数としてコールバック関数を受け入れます。

index.jsファイルで関数を定義し、setTimeout()への呼び出しの本文内でclearTimeout()メソッドを渡します。

index.js

function animal(animalName, punctuation = '.') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);

  console.log(`${name}${punctuation}`);
}

const animalTimer = setTimeout(animal, 800, 'shark', '!');

setTimeout(() => {
  clearTimeout(animalTimer);
}, 250);

変数animalTimerは、コールバックとしてanimal関数を使用し、800ミリ秒の遅延で2番目の引数を使用して、setTimeout()メソッドへの呼び出しの値を割り当てます。

setTimeout()メソッドへの2回目の呼び出しは、無名関数の本体内でclearTimeout()メソッドを受け入れ、250ミリ秒の遅延を受け入れます。 clearTimeout()メソッドを設定すると、メソッド呼び出しと250ミリ秒の遅延の両方がanimalTimer変数の値をキャンセルするため、値はコンソールにログインしません。 setTimeout()メソッドの2回目の呼び出しでミリ秒数を増やすと、コンソールに値が記録され、遅延が発生するとインスタンスが終了します。

setInterval()メソッドをキャンセルするには、clearInterval()メソッドを適用できます。 clearTimeout()と同様に、clearInterval()メソッドはコールバック関数を引数として受け入れます。

index.jsファイルで、setInterval()への呼び出しの本文内でclearTimeout()メソッドを使用します。

index.js

let i = 0;

function increment() {
  i++;
  console.log(i);
}

const incrementTimer = setInterval(increment, 1000);

setInterval(() => {
  clearInterval(incrementTimer);
}, 3000)

ここで、変数incrementTimer()は、setInterval()への呼び出しをその値として格納します。 setInterval()メソッドへの2番目の呼び出しは無名関数を定義し、3000ミリ秒の遅延を設定します。 この呼び出しは、incrementTimer変数を引数としてclearInterval()メソッドも渡します。 3000ミリ秒後、コンソールは増分値をログに記録し、遅延が満たされるとsetInterval()メソッドは終了します。

結論

この記事では、JavaScriptがコードを1行ずつ読み取るときに、setTimeout()メソッドとsetInterval()メソッドが、コードを非同期で実行し、関数呼び出しのタイミングを自由に設定できるソリューションを提供することを学びました。

setInterval()は、指定された時間にわたって継続的に実行されます。 setTimeout()は1回実行されますが、再帰的に使用して、コールバックが再実行を待機するタイミングを示すのを待機できます。 再帰的アプローチは、遅延が終了するよりも長くかかる可能性のあるタスクを再度実行する必要がある状況で役立ちます。