ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用して実行時に setinterval() メソッドの間隔を変更するにはどうすればよいですか?

JavaScript を使用して実行時に setinterval() メソッドの間隔を変更するにはどうすればよいですか?

PHPz
PHPz転載
2023-09-07 23:45:10953ブラウズ

如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔?

setInterval() メソッドは、括弧内のパラメーターとして指定された特定の時間間隔の後に、コードの特定のブロックを繰り返し呼び出すために使用されます。 setInterval() メソッドは 2 つのパラメータを受け入れます。最初のパラメータは繰り返し実行する必要があるコードで、2 番目のパラメータはコードを再度実行する必要がある時刻です。

この記事では、実行時に setInterval() メソッドの時間間隔を変更する方法を学びます。このようにして、指定されたコードが不定期または可変間隔で実行されます。

JavaScript には、以下に示すように、setInterval() メソッドの時間間隔を変更するための 2 つの異なる組み込みメソッドが用意されています。 -

  • clearInterval() メソッドを使用します。

  • setTimeout() メソッドを使用します。

これら 2 つのメソッドの動作原理と実装についてそれぞれ詳しく学びましょう。

clearInterval() メソッドを使用する

clearInterval() メソッドは、以前に実行された setInterval() 関数をクリアまたは停止するために使用されます。 setInterval() に渡される関数内でこの関数を呼び出すことで、このメソッドを使用して seInterval() メソッドの時間間隔を変更できます。これにより、以前に呼び出された setInterval() メソッドがクリアされ、コードで定義する新しいメソッドが使用されます。時間の価値。

###文法###

次の構文は、clearInterval() メソッドを使用して前の setInterval() メソッドをクリアする方法を示しています -

リーリー

実際にこのメソッドを理解して、JavaScriptのclearInterval()メソッドを使ってsetInterval()メソッドのタイミングを変更してみましょう。

###アルゴリズム###

ステップ 1
    - 最初のステップでは、HTML ドキュメントに 2 つの異なるボタンを追加します。1 つは間隔を開始するボタン、もう 1 つは間隔を停止するボタンです。
  • ステップ 2

  • - このステップでは、JavaScript の ID を使用して HTML ドキュメントから必要な要素をすべて取得し、ドキュメントを変更します。
  • ステップ 3
  • - 次のステップでは、最初に clearInterval() メソッドを使用して前の setInterval() をクリアし、次に新しい値を使用して、このステップで定義した関数は、setInterval() メソッドを再度呼び出します。
  • ステップ 4
  • - 最後のステップでは、clearInterval() メソッドを使用して setInterval() の実行を停止する別の JavaScript 関数を定義します。
  • ###例### 以下の例は、コードを詳しく調べることで、上記のアルゴリズムを実際に理解するのに役立ちます -

    リーリー
  • 上記の例では、実行時に JavaScript を使用して、clearInterval() メソッドを使用して setInterval() メソッドの時間間隔を変更します。

setTimeout() メソッドを使用する

setTimeout() メソッドは setInterval() メソッドに似ています。また、特定の間隔の後にコードの一部を呼び出しますが、setInterval() とは異なり、コードを何度も実行するのではなく、一度だけ実行します。 setTimeout() メソッドはコードを 1 回実行すると自動的に停止するため、前の間隔の実行を停止するために setInterval() メソッドのように clearInterval() メソッドを呼び出す必要はありません。

###文法###

setTimeout() メソッドを使用して、次の構文に従って時間間隔を変更します -

リーリー

次に、JavaScript コード例を使用して、このメソッドの実際の実装を見てみましょう。

###アルゴリズム###

この方法のアルゴリズムは前の方法とほぼ同じです。以下に示すように、いくつかの小さな変更を実行するだけで済みます -

前のアルゴリズムの start() 関数から clearInterval() メソッドを削除します。

同じパラメータを持つ setInterval() メソッドの代わりに、setTimeout() メソッドを使用して間隔変数の値を設定します。

###例###
    次の例は、setTimeout メソッドの実際の使用法を説明し、実行する必要がある前述のアルゴリズムの変更を理解するのに役立ちます -
  • リーリー

    この例では、JavaScript の setTimeout() メソッドを使用して、実行時の各呼び出し間の時間間隔を変更します。

  • この記事では、setInterval() メソッドを使用して時間間隔を変更する 2 つの異なる方法について学びました。両方のアプローチについて、必要な理論と実際の実装について、アプローチごとに個別のコード例を使用して詳細に説明します。

以上がJavaScript を使用して実行時に setinterval() メソッドの間隔を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。