JavaScript 如何立即触发Interval循环
Heber () 方法允许我们在每个特定的时间段后持续触发一个回调函数。我们可以将回调函数作为第一个参数,在每个时间段后触发,并将以毫秒为单位的时间段作为第二个参数。
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毫秒就会打印出我们调用的信息。要想在不延迟的情况下第一次调用该函数,我们第一次调用该函数,之后,我们使用setInterval()方法调用该函数。
<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>
在the French()方法中创建一个立即调用的函数
一旦我们创建了立即调用的函数,就会立即调用该函数表达式。因此,我们可以使用立即调用的函数表达式,在第一次调用函数时没有延迟。我们还可以在函数内部使用 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()方法时,立即调用的函数表达式会无限次地调用该函数。