How to trigger setInterval loop immediately using JavaScript ? - GeeksforGeeks

28 Jan, 2020
This article will show some simple ways in which the setInterval() method can be made to execute the function without delay. There are many procedures to do so, below all the procedures are described with the example.
Note: In this article setInterval() method will start immediately for the 1st time run.
Below examples illustrate the above approach:
Example 1: Here, the setInterval() method is returned in gfg() function. The gfg() function trigger itself for subsequent calls using setTimeout() instead. Multiply the output each time in this method.
<!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>
Output:
Example 2: This can be implemented using immediately invoked function expressions (IIFE) . It defines the function gfg() and calls in one go. Multiply the output each time in this method.
<!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>
Output:
Example 3: The simplest way is calling the gfg() first and then starting the setInterval’s cycle of execution.
<!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>
Output:
In all the above code, the first time “Hello! geeks for geeks” statement will be displayed immediately followed by the second and third and so on with a time interval of 3 seconds. The first time gfg() will be called immediately after running the code.
Note: All the above examples can be tested by typing them within the script tag of HTML or directly into the browser’s console.
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?