如何使用 JavaScript 立即觸發 setInterval 循環？
- 王林轉載
- 2023-08-24 16:05:052713瀏覽
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中文網其他相關文章！