首頁 > web前端 > js教程 > 如何使用 JavaScript 立即觸發 setInterval 循環?

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

王林
發布: 2023-08-24 16:05:05
轉載
2780 人瀏覽過

如何使用 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中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板