ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript setInterval()関数の例

JavaScript setInterval()関数の例

Joseph Gordon-Levitt
リリース: 2025-03-08 00:31:09
オリジナル
465 人が閲覧しました

JavaScript setInterval() Function Examples

javascriptのsetInterval()関数は、タイマーに基づいてタスクを自動的に実行するために使用されます。 setInterval()はネイティブのJavaScript関数であり、jQueryのsetTimeout()関数に非常に似ています。

BASICsetInterval()

setInterval(function() {
      // 每5秒执行一次操作
}, 5000);
ログイン後にコピー
ログイン後にコピー

ヒント:画像を動的にロードし、PHPスクリプトから変数をロードする場合、すべてのブラウザに更新を強制するために、スクリプトに何らかのランダム数を追加する必要があります。次のコードを使用して乱数を生成できます。

$(document).ready(function() {
    var refreshId = setInterval(function() {
        var r = (-0.5) + (Math.random() * (1000.99));
        $('#img-container').load('images/gallery/best/random.php?' + r);
    }, 5000);
});
ログイン後にコピー
ログイン後にコピー
ヒント:

キャッシュされたAJAX要求を防ぐために、ロードメソッドの代わりにAJAXメソッドを使用する必要がある場合があります。または、ブラウザキャッシュを防ぐために、ファイルの上部にを追加することもできます。 random.php header("Cache-Control: no-cache, must-revalidate");

javascript

faqs(faqs)setInterval

の違いは何ですか? setInterval setTimeout

および

はどちらも、指定された期間後にコードを実行するために使用される組み込みのJavaScript関数です。しかし、それらは異なって動作します。 setIntervalは、停止するまでコードを繰り返し実行します。 setTimeout setInterval停止するか、クリアする方法setTimeout

setInterval関数を使用して、を停止またはクリアできます。この関数には、パラメーターとして

関数によって返されるID値が必要です。例:clearInterval setInterval setInterval

を呼び出した後、
let intervalID = setInterval(myFunction, 3000);
// 清除间隔
clearInterval(intervalID);
ログイン後にコピー
ログイン後にコピー
は3秒ごとに実行を停止します。

clearIntervalmyFunction矢印関数で使用できますか?

はい。矢印関数は、JavaScriptで関数式を書き込むための簡潔な構文を提供します。例:setInterval

このコードは「こんにちは、世界!」を記録します。

setInterval(() => {
  console.log('Hello, World!');
}, 1000);
ログイン後にコピー
ログイン後にコピー
JavaScriptクラスで

を使用する方法は?

setIntervalキーワードリファレンスクラスメソッドを使用して、クラスで使用できます。ただし、

thisこのコードは「こんにちは、世界!」を記録します。 setInterval this追加のパラメーターを

の関数に渡すことはできますか?
class MyClass {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
    setInterval(this.myMethod, 1000);
  }

  myMethod() {
    console.log('Hello, World!');
  }
}
ログイン後にコピー

はい。遅延したパラメーターの後、関数が呼び出されたときに関数が渡されるパラメーターの数を追加できます。例:

setIntervalこのコードは「こんにちは、世界!」を記録します。

約束でsetIntervalを使用する方法は?

Promise Constructorに

をラッピングすることにより、setIntervalを約束して使用できます。ただし、setIntervalは停止するまで実行され続けることを忘れないでください。そのため、約束を解析または拒否する条件を提供する必要があります。例:setInterval

setInterval(function() {
      // 每5秒执行一次操作
}, 5000);
ログイン後にコピー
ログイン後にコピー
このコードは、6秒後に約束を解析します。

関数が

遅延時間よりも長く実行された場合はどうなりますか? setInterval

関数実行時間が

遅延時間よりも長い場合、次の呼び出しは、現在の呼び出しが完了した直後にキューに登録され、実行されます。これにより、関数呼び出しが積み重なる可能性があり、パフォーマンスの問題につながる可能性があります。 setInterval

node.jsで

を使用できますか? setInterval

はい、それはブラウザと同じように動作します。例:

$(document).ready(function() {
    var refreshId = setInterval(function() {
        var r = (-0.5) + (Math.random() * (1000.99));
        $('#img-container').load('images/gallery/best/random.php?' + r);
    }, 5000);
});
ログイン後にコピー
ログイン後にコピー
このコードは、「hello、node.js!」を毎秒記録します。

setIntervalで使用する方法は? async/await

は、約束で

をラッピングし、setInterval構文を使用して約束を処理することにより、async/awaitで使用できます。例:setInterval async/await

このコードは、6秒後にコンソールに「こんにちは、async/wait!」を記録します。
let intervalID = setInterval(myFunction, 3000);
// 清除间隔
clearInterval(intervalID);
ログイン後にコピー
ログイン後にコピー

jqueryで使用できますか?

setIntervalはい、それを使用して、Webページの一部を定期的に更新したり、要素をアニメーション化したり、他のタスクを実行したりできます。例:

このコードは、ID「MyElement」を備えた要素をフェードアウトし、毎秒フェードします。
setInterval(() => {
  console.log('Hello, World!');
}, 1000);
ログイン後にコピー
ログイン後にコピー

以上がJavaScript setInterval()関数の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート