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

序章

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

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

申請中 setTimeout()

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

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

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

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

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

あなたの中で index.js ファイル、グローバルスペースで関数を定義し、内の関数ラベルを渡します setTimeout() 方法：

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

setTimeout(greeting, 1000);

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

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

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 ファイルで、数値をインクリメントして値をログに記録する関数を定義します。

let i = 0;

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

setInterval(increment, 1000);

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

Output
1
2
3
...

として setInterval() コールバック関数への連続する呼び出しごとに遅延を適用します。メソッドをいつ使用するかを考えてみましょう。 setTimeout().

使用する setTimeout() 再帰的に

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

あなたの中で index.js ファイル、数値をインクリメントし、再帰を適用する関数を定義します setTimeout() 方法：

let i = 0;

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

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

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

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

使用する clearTimeout() と clearInterval()

キャンセルするには setTimeout() 方法、あなたはに頼ることができます clearTimeout() あなたの体の中で渡されたメソッド setTimeout() 電話。 The clearTimeout() メソッドは、コールバック関数を引数として受け入れます。

あなたの中で index.js ファイル、関数を定義し、 clearTimeout() 呼び出しの本文内のメソッド setTimeout():

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 その値に呼び出しを割り当てます setTimeout() あなたとの方法 animal コールバックおよび遅延のある2番目の引数として機能します 800 ミリ秒。

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

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

あなたの中で index.js ファイル、使用 clearTimeout() 呼び出しの本文内のメソッド setInterval():

let i = 0;

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

const incrementTimer = setInterval(increment, 1000);

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

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

結論

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

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