JavaScript setintervalの使用法-フロントエンドQ&A-php.cn

JavaScript setintervalの使用法

WBOY

リリース： 2023-05-15 20:16:05

オリジナル

1417 人が閲覧しました

JavaScript は、最も一般的に使用されるフロントエンドプログラミング言語の 1 つです。強力な機能と柔軟な機能を備えています。重要な機能の 1 つは setInterval() です。 setInterval() は、コードを実行する間隔を作成するために使用される JavaScript メソッドです。これにより、指定した間隔でコードを繰り返し呼び出すことができます。この記事では、setInterval() の使用法を詳しく紹介し、いくつかの実践例を示します。

setInterval() メソッドの基本構文は次のとおりです:

setInterval(function, milliseconds);

最初のパラメータは実行されるコードブロックであり、 2 番目のパラメータは、コードを実行する間隔 (ミリ秒単位) です。

以下は簡単な例です:

setInterval(function(){
  console.log("Hello World!");
}, 1000);

ログイン後にコピー

このコードは 1 秒ごとに「Hello World!」を出力します。 setInterval() メソッドには、コードブロックを実行するためのパラメーターとして関数が必要です。パラメーターを渡す必要がある場合は、匿名関数を使用してこれを実現できます。例:

var name = "Mike";

setInterval(function(){
  console.log("Hello " + name + "!");
}, 1000);

ログイン後にコピー

この例では、「Hello Mike!」を 1 秒ごとに出力します。この例では、変数を使用して、コードブロックで使用する name パラメーターを渡しました。

setInterval() メソッドは、タイマーをクリアするために使用できる識別子を返します。以下に例を示します。

var timer = setInterval(function(){
  console.log("Hello World!");
}, 1000);

// 清除定时器
clearInterval(timer);

ログイン後にコピー

この例では、まず setInterval() メソッドの戻り値を変数 timer に格納し、次に、clearInterval() メソッドを使用してタイマーをクリアします。これにより、コードブロックの実行が停止され、関連するメモリがクリアされます。

setInterval() メソッドをネストして、複数の時間間隔でコードブロックを実行することもできます。例:

setInterval(function(){
  console.log("First block of code");
  setTimeout(function(){
    console.log("Second block of code");
  }, 500);
}, 1000);

ログイン後にコピー

この例では、2 つのコードブロックを定義しました。コードの最初のブロックは、1 秒ごとに「コードの最初のブロック」を出力します。最初のコードブロックの最後で、setTimeout() メソッドを使用して 2 番目のコードブロックを定義します。これにより、0.5 秒ごとに「2 番目のコードブロック」が出力されます。 2 つのコードブロックの時間間隔は異なります。

最後に、setInterval() メソッドの実際の使用例を見てみましょう。オンラインのストップウォッチを作成しているとします。秒を記録し、画面に数値を表示するにはタイマーが必要です。アプリのコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title>Online Timer</title>
</head>
<body>
    <h1>Online Timer</h1>
    <p id="output">0</p>
    <button onclick="startTimer()">Start</button>
    <button onclick="stopTimer()">Stop</button>
    <button onclick="resetTimer()">Reset</button>

    <script>
        var timer = null;
        var count = 0;

        function startTimer(){
            timer = setInterval(function(){
                count++;
                document.getElementById("output").innerHTML = count;
            }, 1000);
        }

        function stopTimer(){
            clearInterval(timer);
        }

        function resetTimer(){
            count = 0;
            document.getElementById("output").innerHTML = count;
            clearInterval(timer);
        }
    </script>
</body>
</html>

ログイン後にコピー

コードには、開始、停止、リセットの 3 つのボタンが含まれています。スタートボタンをクリックすると、startTimer() 関数が呼び出され、毎秒実行される setInterval() 関数が作成されます。この機能は経過時間を記録し、画面に表示します。停止ボタンをクリックすると、stopTimer() 関数が呼び出され、setInterval() 関数の呼び出しがクリアされ、タイマーが停止します。リセットボタンをクリックすると、resetTimer() 関数が呼び出され、カウンターが 0 にリセットされ、タイマーが停止します。

つまり、setInterval() は JavaScript の非常に便利なメソッドであり、指定した間隔でコードのブロックを簡単に実行できます。これを使用すると、JavaScript プログラミングの効率が大幅に向上します。

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