setInterval() 方法用于在圓括號中作為參數指定的特定時間間隔后一次又一次地調用特定的代碼塊。 setInterval() 方法接受兩個參數，第一個參數是需要反復執行的代碼，第二個參數是需要再次執行代碼的時間。
在本文中，我們將學習在運行時更改 setInterval() 方法的時間間隔的方法。這樣，它將以不規則或可變的時間間隔執行給定的代碼。
JavaScript 為我們提供了兩種不同的內置方法來更改 setInterval() 方法的時間間隔，如下所示 –
使用clearInterval()方法。
使用 setTimeout() 方法。
讓我們分別詳細了解這兩種方法的工作原理和實現。
使用clearInterval()方法
clearInterval()方法用于清除或停止之前執行的setInterval()函數。我們可以使用此方法來更改 seInterval() 方法的時間間隔，方法是在傳遞給 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() 方法設置間隔變量的值，而不是具有相同參數的 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() 方法更改時間間隔的兩種不同方法。我們通過所需的理論詳細討論了這兩種方法，并借助每種方法的單獨代碼示例來實際實現。
以上就是如何使用 JavaScript 在運行時更改 setinterval() 方法的時間間隔？的詳細內容，更多請關注www.92cms.cn其它相關文章！
