setInterval と setTimeout: どちらを使用する必要がありますか?

JavaScript を使ったことがある人なら、必ず setInterval と setTimeout をどこかで見たことがあるでしょう。これら 2 つのメソッドは、しばらく後、または一定の間隔ごとに、コードにいつ何かを行うかを指示する魔法のツールのようなものです。しかし、一方を使用し、他方を使用しないのはどのような場合でしょうか? ?

setTimeout と setInterval とは何ですか?

どれを使用するかを決める前に、それぞれが何をするのか覚えておく価値があります。

setTimeout を、しばらくしてから鳴るアラームとして想像してください。どれくらい待つかを指定すると、関数がドーンと実行されます。しかし、彼は一度しかそれをしません。

  setTimeout(() => {
      console.log("¡Hola después de 2 segundos!");
  }, 2000);

ここでは、その「こんにちは!」 2 秒後に表示されて終了し、機能は繰り返されません。

setInterval の場合、オフにするまで数分ごとに鳴り続けるアラームのようなものです。繰り返し間の待機時間を指定すると、停止するよう指示されるまで関数の実行が継続されます。

  setInterval(() => {
      console.log("¡Hola cada 2 segundos!");
  }, 2000);

この場合、clearInterval 関数で間隔を停止するまで、メッセージは 2 秒ごとに表示されます。

setTimeout をいつ使用する必要がありますか?

setTimeout は、すぐにではなく 1 回だけ何かを実行したい場合の最良の友です。これが非常に役立つ状況をいくつか示します:

• 短い一時停止: アニメーションを実行する前に数秒待つ必要がある場合や、表示する前に何かをロードする時間を与えたい場合があります。

• 非同期プロセス: 複雑な操作では、次のステップに進む前にしばらく待つ必要がある場合があります。

したがって、何かを一度実行する前に少しの遅延が必要なだけの場合は、setTimeout がオプションです。

setInterval はどうなるでしょうか?

setInterval は、止まることのない時計のように、何かを繰り返し発生させる必要がある場合に必要なものです。 setInterval が有効な例をいくつか示します:

• 時計とタイマー: 時間を毎秒更新する時計、またはカウントダウン タイマーを想像してください。

• 定期チェック: 新しいメッセージ、更新があるか、アプリケーションに何か変更がないかを時々チェックします。

• リアルタイム更新: 数秒ごとに新しいデータでページのコンテンツを更新します。

何かを定期的に実行し続けることが必要な場合は、setInterval が最適です。

パフォーマンスに関するいくつかのこと

setTimeout と setInterval は両方とも確実なものではないことに言及することが重要です。アプリケーションが非常にビジーな場合、特に多くのことを同時に実行している場合、タイマーが遅れる可能性があります。また、setInterval には注意してください。setInterval 内での実行に設定した間隔よりも長い時間がかかると、関数が蓄積し始め、そこから問題が発生する可能性があるためです。

これを回避するために、setInterval の代わりに setTimeout を再帰的に使用することを好む人もいます。これにより、次の関数が実行されるタイミングをより詳細に制御できるようになります。

function ejecutarCada2Segundos() {
    console.log("¡Hola cada 2 segundos!");
    setTimeout(ejecutarCada2Segundos, 2000);
}

ejecutarCada2Segundos();

しかし、setInterval を使用することに決めた場合は、間隔が無制限に実行され続けるのを防ぐために間隔を停止する方法を知ることが重要です。ここでclearIntervalが登場します。このメソッドを使用すると、アクティブな間隔を停止できます。簡単な例を次に示します:

const intervalo = setInterval(() => {
    console.log("¡Hola cada 2 segundos!");
}, 2000);

// Detener el intervalo después de 10 segundos
setTimeout(() => {
    clearInterval(intervalo);
    console.log("Intervalo detenido");
}, 10000);

この例では、「2 秒ごとにこんにちは!」というメッセージが表示されます。を 10 秒間繰り返します。その後、clearInterval が間隔の停止を処理し、「間隔が停止しました」というメッセージがコンソールに表示されます。

では、どれを使えばいいのでしょうか？

つまり、しばらくしてから 1 回だけ何かを実行する必要がある場合は、setTimeout を使用するのが最適です。ただし、何かを継続的に繰り返したい場合は、setInterval を選択してください。

どちらも JavaScript の強力なツールであり、それぞれをいつ使用するかを知ることで、コードの効率が向上し、管理が容易になります。

以上がsetInterval と setTimeout: どちらを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。