如何使用 JavaScript 立即觸發 setInterval 循環？-js教程-PHP中文網

範例 3

第一次呼叫函數，之後使用setInterval()方法

文法

在setInteral()方法中建立立即呼叫的函數

首頁

web前端

js教程

如何使用 JavaScript 立即觸發 setInterval 循環？

王林

Aug 24, 2023 pm 04:05 PM

如何使用 JavaScript 立即触发 setInterval 循环？

setInteral()方法允許我們在每個特定時間段後連續觸發回調函數。我們可以將回呼函數作為第一個參數傳遞給每個時間段後觸發，並將以毫秒為單位的時間段作為第二個參數。

setInterval() 方法在第一次特定的毫秒數後呼叫回呼函數。現在的問題是，我們需要在第一次0毫秒立即呼叫回呼函數，之後，我們需要在給定的時間段內連續呼叫它。

範例

在下面的範例中，我們建立了 func() 函數，該函數列印文件中的消息。我們使用了 setInterval() 方法，該方法每 3000 毫秒呼叫一次 func() 函數。

<html>
<body>
   <h3> Using the <i> setInteral() </i> method to invoke the particular function continuosly </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "Please wait ...." + "<br>";
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      setInterval(func, 3000);
   </script>
</body>
</html>

登入後複製

在輸出中，使用者可以觀察到 setInteraval() 方法在 3000 毫秒後首次呼叫 func() 函數。

使用者可以按照以下方式在0毫秒處首次呼叫func()函數。

第一次呼叫函數，之後使用setInterval()方法

使用 setInterval() 方法時，首次無延遲呼叫函數的一種方法是首次呼叫函數。

當我們第一次呼叫函數時，它會在第 0 毫秒執行。之後，setInterval()方法會在一定時間後連續執行函數。

文法

使用者第一次使用setInterval()方法時，可以依照下面的語法立即呼叫函數。

func_name()
setInterval(func_name, 1000);

登入後複製

在上面的語法中，我們第一次呼叫了 func_name() 函數，之後每 1000 毫秒呼叫一次。

範例

在下面的範例中，func() 函數使用 setInterval() 方法每 1000 毫秒呼叫一次訊息。為了不延遲地第一次呼叫該函數，我們首先呼叫該函數，然後使用 setInteral() 方法呼叫該函數。

<html>
<body>
   <h3> Invoking the function for the first time and, after that, using the setInteral() method to invoke the particular function continuously. </h3>
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      func()
      setInterval(func, 1000);
   </script>
</html>

登入後複製

在setInteral()方法中建立立即呼叫的函數

一旦我們建立函數表達式，立即呼叫的函數就會立即呼叫它。因此，我們可以使用立即呼叫函數表達式來首次呼叫該函數，而無需延遲。我們也可以在函數內部使用setInterval()方法以特定的時間間隔執行函數。

文法

使用者在使用 setInterval() 方法時，可以依照下列語法使用立即呼叫的函數表達式來無延遲地執行函數。

(function name() {
   setInterval(name, 3000);
})()

登入後複製

在上面的語法中，我們在大括號中編寫了函數表達式，然後編寫左大括號和右大括號以立即呼叫該函數。

範例 3

下面的範例建立一個測試函數，使用 setInterval() 方法在每個時間間隔後呼叫。我們將 test() 函數編寫為立即呼叫的函數表達式，並在函數內使用 setInterval() 方法，每 3000 毫秒呼叫一次 test() 函數。

我們可以觀察到測試函數在刷新網頁時第一次在第 0 毫秒調用的輸出，然後每 3000 毫秒調用一次。

<html>
<body>
   <h3> Using the immediately invoked function expression to invoke the function without delay for the first time while using the setInteral() method </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (function test() {
         output.innerHTML += "The test() function is invoked!" + "<br>";
         setInterval(test, 3000);
      })()
   </script>
</body>
</html>

登入後複製

使用者第一次學會如何無延遲地呼叫 setInterval() 方法中所使用的函數。使用者可以第一次呼叫函數，也可以使用立即呼叫的函數表達式。

建議首次呼叫函數，而不是使用立即呼叫的函數表達式，因為它會遞歸呼叫該函數。經過一段時間間隔後，當我們在其中使用 setInterval() 方法時，立即呼叫的函數表達式會無限次呼叫該函數。

以上是如何使用 JavaScript 立即觸發 setInterval 循環？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn