JavaScript 如何立即触发setInterval循环

JavaScript 如何立即触发setInterval循环

setInterval() 方法允许我们在每个特定时间段后连续触发回调函数。我们可以将回调函数作为第一个参数传递以在每个时间段后触发,并将时间段以毫秒作为第二个参数传递。

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>

在setInterval()方法中创建一个立即调用的函数

立即调用函数一旦创建就立即调用函数表达式。因此,我们可以使用立即调用的函数表达式,在第一次没有延迟地调用该函数。我们还可以在函数内部使用setInterval()方法来按照特定的间隔执行该函数。

语法

用户可以按照以下语法使用立即调用函数表达式,在使用setInterval()方法时无延迟地执行函数。

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

在上面的语法中,我们在大括号中写入了函数表达式,然后我们在大括号中写入了开启和关闭的大括号以立即调用函数。

示例3

以下示例使用setInterval()方法创建一个在每个时间间隔后调用的测试函数。我们将test()函数写为立即调用的函数表达式,并在函数内部使用setInterval()方法,在每3000毫秒后调用test()函数。

我们可以观察到,当我们刷新网页时,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()方法内部无限次调用函数。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程