首頁 > 文章 > web前端 > 如何使用 JavaScript 在運行時更改 setinterval() 方法的時間間隔？

如何使用 JavaScript 在運行時更改 setinterval() 方法的時間間隔？

PHPz轉載: 2023-09-07 23:45:10950瀏覽

如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？

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() 方法的時間間隔？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 算法

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在普通 JavaScript 中實作多輸入複選框？下一篇：如何在普通 JavaScript 中實作多輸入複選框？

看更多