資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中使用 setInterval 函式？
在本教程中，我們將學習如何在 JavaScript 中使用 setInterval 函式。
JavaScript 中的 setInterval() 方法以一定間隔計算表示式。它用於執行需要在特定時間間隔內執行的重複性任務或操作。例如，它以固定的時間延遲重複呼叫函式以執行任務。視窗介面提供此方法。
此方法返回一個唯一標識間隔的間隔 ID，允許您稍後透過執行 clearInterval() 方法將其刪除。
使用者可以按照以下語法使用 setInterval 函式。
語法
setInterval(function, time, parameter1, parameter2, ...)
在上述語法中，我們展示了 setInterval 函式執行其操作所需的所有引數。
引數
函式 − 將在特定時間間隔內執行的函式或程式碼（必需）。
時間 − 以毫秒為單位的時間間隔（必需）。
parameter1, parameter2,... − 傳遞給函式的引數（可選）。
返回型別
數字 − setInterval 計時器的 ID。它用於透過將其傳遞到 clearInterval() 函式來停止 setInterval 計時器。
示例 1
使用 setInterval 函式建立數字時鐘
在下面的示例中，我們使用了 JavaScript 中的 setInterval 函式來構建一個數字時鐘。我們使用了 JavaScript 的 Date 建構函式來獲取當前時間，然後每隔 1 秒更改一次元素的 inner text。document.getElementById() 方法用於訪問元素物件，以更改元素的 innerHTML 以顯示其中的當前時間。
<html> <body> <h2>Using the<i> setInterval function</i> to build a digital clock in JavaScript</h2> <h4>Current Time:</h4> <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" > </span> <script> // element to show the current time const root = document.getElementById('root') // setInterval function setInterval(() => { // getting the local time const date = new Date(); root.innerHTML = date.toLocaleTimeString(); }, 1000); </script> </body> </html>
示例 2
使用 setInterval 函式啟動和停止計數器
在下面的示例中，我們使用了 JavaScript 中的 setInterval 函式來遞增計數器值，並透過兩次按鈕點選來停止計數器值。“開始”和“停止”這兩個按鈕，點選它們可以分別開始計數器值的遞增或停止它。我們使用了 clearInterval() 函式來停止 setInterval 函式。
<html> <body> <h2>Using the <i>setInterval function</i> to start and stop incrementing a counter value in JavaScript</h2> <button onclick = "startFunction()" >Start</button> <button onclick = "stopFunction()" >Stop</button> <h4>Counter value:</h4> <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" > 0 </span> <script> // element to show the counter value const root = document.getElementById('root') // setInterval function id let intervalId = null // counter variable let counter = 0; // 'Start' button click handler function function startFunction(){ // assigning the setInterval function to increment the counter value intervalId = setInterval(() => { root.innerHTML = counter counter++; }, 1000); } // 'Stop' button click handler function function stopFunction(){ // stopping the setInterval function using the clearInterval function clearInterval(intervalId); } </script> </body> </html>
在本教程中，我們學習瞭如何在 JavaScript 中使用 setInterval 函式呼叫。我們討論了此函式的語法、引數和返回型別。我們在兩個示例中使用了 setInterval 函式來構建數字時鐘和可控的增量計數器。此外，我們學習了 clearInterval 函式來停止 setInterval 計時器。使用者可以參考這些示例來更好地理解 setInterval 函式的功能。
3K+ 次瀏覽
