JavaScript 如何立即触发setInterval循环
本文将展示一些简单的方法,可以使setInterval()方法在不延迟的情况下执行函数。有许多程序可以实现这一点,以下所有程序都以示例的形式进行了描述。
注意: 在本文中,setInterval()方法将立即开始运行第一次。
下面的示例演示了上述方法:
示例1
在这里,setInterval()方法在gfg()函数中返回。gfg()函数每次使用setTimeout()方法触发后续调用。在这种方法中,每次输出都会进行乘法计算。
<!DOCTYPE html>
<html>
<head>
<title>
Start setInterval loop immediately
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>
Start setInterval loop immediately
</h4>
<script>
function gfg() {
document.write("Hello! geeks"
+ " for geeks<br>");
return setInterval(gfg, 3000);
}
// Function call
gfg();
</script>
</body>
</html>
输出:

示例2
可以使用 立即执行函数表达式(IIFE) 来实现。它定义了函数 gfg() 并在一次调用中执行。每次在此方法中将输出相乘。
<!DOCTYPE html>
<html>
<head>
<title>
Start setInterval loop immediately
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>
Start setInterval loop immediately
</h4>
<script>
// Using IIFE
(function gfg() {
document.write("Hello! geeks"
+ " for geeks<br>");
return setInterval(gfg, 3000);
})();
</script>
</body>
</html>
输出:

示例3
最简单的方法是先调用 gfg() ,然后开始setInterval的执行循环。
<!DOCTYPE html>
<html>
<head>
<title>
Start setInterval loop immediately
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>
Start setInterval loop immediately
</h4>
<script>
function gfg() {
document.write("Hello! geeks"
+ " for geeks<br>")
}
gfg();
setInterval(gfg, 3000);
</script>
</body>
</html>
输出:

在以上的所有代码中,第一条 “Hello! geeks for geeks” 语句将立即显示,紧随其后的是第二条和第三条等等,之间间隔为3秒。第一次运行代码后,立即调用 gfg() 。
注意: 可通过将上述所有示例输入到HTML的脚本标签中或直接在浏览器控制台中输入来进行测试。
极客教程