JavaScript - setInterval() 方法

上一頁
下一頁

JavaScript setInterval() 方法

在 JavaScript 中，setInterval() 是一個視窗方法，用於以特定間隔重複執行函式。setTimeout() 方法允許您僅在指定時間後執行一次函式。

“window” 物件包含 setInterval() 方法。但是，您可以執行 setInterval() 方法，而無需將“window” 物件作為引用。

語法

以下是 JavaScript 中使用 setInterval() 方法的語法：

setInterval(callback,interval, arg1, arg2, ..., argN);

前兩個引數是必需的，其他引數是可選的。

引數

  • 回撥函式 - 這是將在每個間隔後執行的回撥函式。
  • 間隔 - 這是回撥函式應執行後的毫秒數。
  • Arg1、arg2、arg3、…、argN - 它們是傳遞給回撥函式的多個引數。

返回值

setInterval() 方法返回數字 ID。

示例

在下面的程式碼中，startTimer() 函式使用 setInterval() 方法在每隔 1000 毫秒後呼叫 timer() 函式。

timer() 函式每次被 setInterval() 方法呼叫時都會增加“second”全域性變數的值並列印計數器。

您可以單擊按鈕以在輸出中啟動計時器。

<html>
<body>
   <button onclick = "startTimer()">Start Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         setInterval(timer, 1000); // Calls timer() function after every second
      }
      function timer() { // Callback function
         seconds++;
         output.innerHTML += "Total seconds are: " + seconds + "<br>";
      }
   </script>
</body>
</html>

輸出

JavaScript setInterval() Method

帶有 setInterval() 方法的箭頭函式

下面的示例包含與上面示例幾乎相同的程式碼。在這裡，我們將箭頭函式作為 setInterval() 方法的第一個引數傳遞，而不是隻傳遞函式名。您可以單擊按鈕以啟動計時器。

示例

<html>
<body>
   <button onclick = "startTimer()">Start Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         setInterval(() => {
            seconds++;
            output.innerHTML += "Total seconds are: " + seconds + "<br>";
         }, 1000); // Calls timer() function after every second
      }
   </script>
</body>
</html>

輸出

Arrow Function with setInterval() Method

向 setInterval() 方法傳遞多個引數

在下面的程式碼中，我們向 setInterval() 方法傳遞了 3 個引數。第一個引數是列印日期的回撥函式，第二個引數是間隔，第三個引數將傳遞給回撥函式。

示例

<html>
<body>
   <button onclick = "startTimer()">Start Date Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         let message = "The date and time is: ";
         setInterval(printDate, 1000, message);
      }
      function printDate(message) {
         let date = new Date();
         output.innerHTML += message + date + "<br>";
      }
   </script>
</body>
</html>

輸出

Passing More than 2 Arguments to setInterval() Method

JavaScript 中的 clearInterval() 方法

JavaScript clearInterval() 方法用於停止使用 clearItnerval() 方法啟動的程式碼執行。

它將 setInterval() 方法返回的數字 ID 作為引數。

語法

請遵循以下語法以使用 clearInterval() 方法。

clearInterval(id);

此處，id 是 setInterval() 方法返回的 ID。

示例

在下面的程式碼中，我們使用了 setInterval() 方法來顯示數字，每次遞增 10，並在每秒後遞增。

當數字變為 50 時，我們使用 clearInterval() 方法停止計時器。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let number = 10;
      let id = setInterval(() => {
         if (number == 50) {
            clearInterval(id);
            output.innerHTML += "The time is stopped."
         }
         output.innerHTML += "The number is: " + number + "<br>";
         number += 10;
      }, 1000);
   </script>
</body>
</html>

輸出

The number is: 10
The number is: 20
The number is: 30
The number is: 40
The time is stopped.The number is: 50

setInterval() 方法的即時用例

在上面的示例中，我們使用 setInterval() 方法列印了訊息。在本節中，我們將瞭解 setInterval() 方法的即時用例。

這裡，我們列出了一些即時用例。

  • 重新整理日期
  • 幻燈片
  • 動畫
  • 在網頁上顯示時鐘
  • 更新即時板球比分
  • 更新天氣資訊
  • 執行 cron 作業

以下是 setInterval() 方法的即時示例。

在每個間隔後翻轉 HTML 元素的顏色

在下面的程式碼中，我們每秒翻轉一次 <div> 元素的顏色。

我們在 HTML body 中定義了 div 元素。

在 <head> 部分，我們添加了“red”和“green”類。此外，我們在紅色和綠色類中添加了背景顏色。

在 JavaScript 中，我們將回調函式作為 setInterval() 方法的第一個引數傳遞，該函式將在每隔 1000 毫秒後被呼叫。

我們在回撥函式中使用其 id 訪問 <div> 元素。之後，我們檢查 <div> 元素的 classList 是否包含“red”類。如果是，我們將其刪除並新增“green”類。同樣，如果 classList 包含“green”類，我們將其刪除並新增“red”類。

這就是我們如何使用 setInterval() 方法翻轉 <div> 元素的顏色。

示例

<html>
<head>
   <style>
      .red {background-color: red;}
      .green {background-color: green;}
      #square {height: 200px; width: 200px;}
   </style>
</head>
<body>
   <div>Using setInterval() method to flip the color of the HTML element after each interval</div>
   <div id = "square" class = "red"> </div>
   <script>
      let output = document.getElementById('output');
      setInterval(function () {
         let square = document.getElementById('square');
         if (square.classList.contains('red')) {
            square.classList.remove('red');
            square.classList.add('green');
         } else {
            square.classList.remove('green');
            square.classList.add('red');
         }
      }, 1000);
   </script>
</body>
</html>

輸出

Flipping color of HTML element after each interval

使用 setInterval() 方法實現移動動畫

在下面的程式碼中，我們使用 setInterval() 方法建立移動動畫。

我們建立了兩個巢狀的 div 元素。外部 div 的 id 為 'parent'，內部 div 的 id 為 'child'。我們為這兩個 div 元素設定了尺寸，並將位置設定為 'relative'。

在 JavaScript 中，我們初始化了變數 'left' 為 0。之後，我們每隔 50 毫秒呼叫 setInterval() 方法的回撥函式。

在每個間隔內，我們將 <div> 元素的位置改變 5px，當 left 位置變為 450px 時，我們停止動畫。

示例

<html>
<head>
   <style>
      #parent {
         position: relative; 
         height: 50px;
         width: 500px;
         background-color: yellow;
      }
      #child {
         position: relative; 
         height: 50px;
         width: 50px;
         background-color: red;
      }
   </style>
</head>
<body>
   <div id = "parent">
      <div id = "child"> </div>
   </div>
   <script>
      let child = document.getElementById('child');
      let left = 0;
      // Moving animation using the setInterval() method
      setInterval(() => {
         if (left < 450) {
            left += 5;
            child.style.left = left + 'px';
         }
      }, 50);
   </script>
</body>
</html>

輸出

Moving Animation Using setInterval() Method

您還可以使用 setInterval() 方法非同步執行特定的程式碼。

列印頁面
上一頁
下一頁
廣告