Thursday, September 26, 2024
Google search engine
HomeLanguagesJavascriptHow to trigger setInterval loop immediately using JavaScript ?

How to trigger setInterval loop immediately using JavaScript ?

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;">
        neveropen
    </h1>
      
    <h4>
        Start setInterval loop immediately
    </h4>
      
    <script>
        function gfg() {
            document.write("Hello! neveropen"
                        + " for neveropen<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;">
        neveropen
    </h1>
      
    <h4>
        Start setInterval loop immediately
    </h4>
      
    <script>
   
        // Using IIFE
        (function gfg() {
            document.write("Hello! neveropen"
                    + " for neveropen<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;">
        neveropen
    </h1>
      
    <h4>
        Start setInterval loop immediately
    </h4>
      
    <script>
        function gfg() {
            document.write("Hello! neveropen"
                    + " for neveropen<br>")
        }
   
        gfg();
        setInterval(gfg, 3000);
    </script>
</body>
   
</html>


Output:

In all the above code, the first time “Hello! neveropen for neveropen” 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.

RELATED ARTICLES

Most Popular

Recent Comments