最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 JavaScript 立即触发 setInterval 循环?

    如何使用 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() 方法时,立即调用的函数表达式会无限次调用该函数。

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 JavaScript 立即触发 setInterval 循环?
    • 10会员总数(位)
    • 14530资源总数(个)
    • 1070本周发布(个)
    • 160 今日发布(个)
    • 104稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情