資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在執行時使用 JavaScript 更改 setInterval() 方法的時間間隔？
setInterval() 方法用於重複呼叫一段特定的程式碼，其時間間隔作為引數傳遞給圓括號。setInterval() 方法接受兩個引數，第一個是要重複執行的程式碼，第二個是程式碼重複執行的時間間隔。
在本文中，我們將學習如何在執行時更改 setInterval() 方法的時間間隔的方法，以便它能夠以不規則或可變的時間間隔執行給定的程式碼。
JavaScript 提供了兩種不同的內建方法來更改 setInterval() 方法的時間間隔，如下所示：
使用 clearInterval() 方法。
使用 setTimeout() 方法。
讓我們詳細瞭解這兩種方法的工作原理和實現。
使用 clearInterval() 方法
clearInterval() 方法用於清除或停止先前正在執行的 setInterval() 函式。我們可以使用此方法透過在傳遞給 setInterval() 的函式內部呼叫此函式來更改 setInterval() 方法的時間間隔，它將清除先前呼叫的 setInterval() 方法，並使用我們在程式碼中定義的新時間值再次呼叫 setInterval()。
語法
以下語法將向您展示如何使用 clearInterval() 方法清除先前的 setInterval() 方法：
clearInterval( code to be executed, time interval );
讓我們透過實踐來了解此方法，並使用 JavaScript 中的 clearInterval() 方法更改 setInterval() 方法的時間。
演算法
步驟 1 - 在第一步中，我們將在 HTML 文件中新增兩個不同的按鈕，一個用於啟動間隔，另一個用於停止間隔。
步驟 2 - 在此步驟中，我們將使用 JavaScript 中的 ID 從 HTML 文件中獲取所有必需的元素，以便對其進行更改。
步驟 3 - 在下一步中，我們將定義一個 JavaScript 函式，其中首先使用 clearInterval() 方法清除先前的 setInterval()，然後使用一些新值更新時間，並使用在此步驟中定義的函式再次呼叫 setInterval() 方法。
步驟 4 - 在最後一步中，我們將定義另一個 JavaScript 函式，以使用 clearInterval() 方法停止 setInterval() 的執行。
示例
下面的示例將透過深入研究程式碼來幫助您理解上述演算法：
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()"> Start Printing </button>
<button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
clearInterval(interval);
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setInterval(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
在上面的示例中，我們使用了 clearInterval() 方法來使用 JavaScript 在執行時更改 setInterval() 方法的時間間隔。
使用 setTimeout() 方法
setTimeout() 方法與 setInterval() 方法非常相似。它也將在特定時間間隔後呼叫一段程式碼，但與 setInterval() 不同的是，它只會執行一次程式碼，而不是重複執行。setTimeout() 方法在執行一次程式碼後會自動停止，因此我們不需要像在 setInterval() 方法中那樣呼叫 clearInterval() 方法來停止執行先前的間隔。
語法
請遵循以下語法以使用 setTimeout() 方法更改時間間隔：
setTimeout( code to be executed, time interval );
現在讓我們藉助 JavaScript 程式碼示例瞭解此方法的實際實現。
演算法
此方法和先前方法的演算法幾乎相同。您只需要執行以下一些小的更改：
從先前演算法的 start() 函式中移除 clearInterval() 方法。
使用 setTimeout() 方法設定 interval 變數的值，而不是使用相同引數的 setInterval() 方法。
示例
下面的示例將解釋 setTimeout 方法的實際用途，並且還將幫助您理解您需要在先前演算法中執行的上述更改：
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()">Start Printing</button>
<button id = "stopbtn" onclick = "stop()">Stop Printing</button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setTimeout(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
在此示例中，我們使用了 JavaScript 的 setTimeout() 方法來在執行時使用 JavaScript 在每次呼叫時更改時間間隔。
在本文中，我們學習了更改 setInterval() 方法時間間隔的兩種不同方法。我們詳細討論了這兩種方法，包括所需的理論以及每種方法的實際實現，並提供了相應的程式碼示例。
2K+ 瀏覽量
