setInterval() 方法用于在圓括號中作為參數(shù)指定的特定時間間隔后一次又一次地調(diào)用特定的代碼塊。 setInterval() 方法接受兩個參數(shù)，第一個參數(shù)是需要反復(fù)執(zhí)行的代碼，第二個參數(shù)是需要再次執(zhí)行代碼的時間。
在本文中，我們將學(xué)習(xí)在運(yùn)行時更改 setInterval() 方法的時間間隔的方法。這樣，它將以不規(guī)則或可變的時間間隔執(zhí)行給定的代碼。
JavaScript 為我們提供了兩種不同的內(nèi)置方法來更改 setInterval() 方法的時間間隔，如下所示 –
使用clearInterval()方法。
使用 setTimeout() 方法。
讓我們分別詳細(xì)了解這兩種方法的工作原理和實(shí)現(xiàn)。
使用clearInterval()方法
clearInterval()方法用于清除或停止之前執(zhí)行的setInterval()函數(shù)。我們可以使用此方法來更改 seInterval() 方法的時間間隔，方法是在傳遞給 setInterval() 的函數(shù)內(nèi)部調(diào)用此函數(shù)，它將清除先前調(diào)用的 setInterval() 方法并使用我們將在代碼中定義新的時間值。
語法
以下語法將向您展示如何使用clearInterval()方法來清除之前的setInterval()方法 –
clearInterval( code to be executed, time interval );
登錄后復(fù)制
讓我們實(shí)際了解這個方法，并使用 JavaScript 中的clearInterval() 方法更改 setInterval() 方法的時間。
算法
步驟 1 – 在第一步中，我們將在 HTML 文檔中添加兩個不同的按鈕，其中一個用于開始間隔，另一個用于停止間隔。
第 2 步 – 在此步驟中，我們將使用 JavaScript 中的 ID 從 HTML 文檔中獲取所有必需的元素，以在其中執(zhí)行更改。
第3步 – 在下一步中，我們將定義一個JavaScript函數(shù)，其中首先使用clearInterval()方法清除之前的setInterval()，然后用一些新值，并使用我們在此步驟中定義的函數(shù)再次調(diào)用 setInterval() 方法。
第 4 步 – 在最后一步中，我們將定義另一個 JavaScript 函數(shù)，以使用clearInterval() 方法停止 setInterval() 的執(zhí)行。
示例
下面的示例將幫助您通過深入研究代碼來實(shí)際理解上述算法 –
<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>
登錄后復(fù)制
在上面的示例中，我們使用clearInterval()方法在運(yùn)行時使用JavaScript更改setInterval()方法的時間間隔。
使用setTimeout()方法
setTimeout() 方法與 setInterval() 方法類似。它還會在特定時間間隔后調(diào)用一段代碼，但與 setInterval() 不同，它只會執(zhí)行代碼一次，而不是一次又一次地執(zhí)行。 setTimeout() 方法在執(zhí)行一次代碼后會自動停止，因此我們不需要像 setInterval() 方法那樣調(diào)用clearInterval() 方法來停止執(zhí)行前一個時間間隔。
語法
按照以下語法使用 setTimeout() 方法更改時間間隔 –
setTimeout( code to be executed, time interval );
登錄后復(fù)制
現(xiàn)在讓我們借助 JavaScript 代碼示例了解此方法的實(shí)際實(shí)現(xiàn)。
算法
這個方法的算法和之前的方法幾乎是一樣的。您只需要執(zhí)行一些小的更改，如下所示 –
從之前算法的start()函數(shù)中刪除clearInterval()方法。
使用 setTimeout() 方法設(shè)置間隔變量的值，而不是具有相同參數(shù)的 setInterval() 方法。
示例
下面的例子將解釋setTimeout方法的實(shí)際使用，并幫助您理解之前算法中的上述變化，您需要執(zhí)行 –
<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>
登錄后復(fù)制
在此示例中，我們使用 JavaScript 的 setTimeout() 方法來使用 JavaScript 更改運(yùn)行時每次調(diào)用的時間間隔。
在本文中，我們了解了 setInterval() 方法更改時間間隔的兩種不同方法。我們通過所需的理論詳細(xì)討論了這兩種方法，并借助每種方法的單獨(dú)代碼示例來實(shí)際實(shí)現(xiàn)。
以上就是如何使用 JavaScript 在運(yùn)行時更改 setinterval() 方法的時間間隔？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
