How to execute setInterval function without delay for the first time in JavaScript ?

The setInterval() method always invokes the function after the delay for the first time using two approaches:

Method 1: Calling the function once before executing setInterval: The function can simply be invoked once before using the setInterval function. This will execute the function once immediately and then the setInterval() function can be set with the required callback.
A new function is created which encloses the invoking of the function first and then calls the setInterval() function next. This will help to simulate the setInterval() function without a delay for the first time.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to execute setInterval function without
        delay for the first time in JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Execute the setInterval function
        without delay the first time
    </b>
      
    <p>
        Click on the button to execute the
        setInterval() function without delay.
    </p>
      
    <button onclick="startSetInterval()">
        Start immediate setInterval
    </button>
      
    <script type="text/javascript">
          
        let count = 1;
      
        function exampleFunction() {
            console.log('Function Executed! ' + count);
            count = count + 1;
        }
      
        function noDelaySetInterval(func, interval) {
            func();
            return setInterval(func, interval);
        }
      
        function startSetInterval() {
            noDelaySetInterval(exampleFunction, 3000);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Immediately after clicking the button:
    callNormal-immediately
  • After waiting for 3 seconds:
    callNormal-after-9

Method 2: Using an immediately invoking function inside setInterval function: An Immediately-invoked Function Expression (IIFE) is a type of function that immediately gets invoked after its declaration. This property can be used in the callback of the setInterval() function, as it would get immediately executed once and then the actual setInterval() with this function will start after the specified delay. This will help to simulate the setInterval() function without a delay for the first time.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Execute the setInterval function
        without delay the first time
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Execute the setInterval function
        without delay the first time
    </b>
      
    <p>
        Click on the button to execute the
        setInterval() function without delay.
    </p>
      
    <button onclick="startSetInterval()">
        Start immediate setInterval
    </button>
      
    <script type="text/javascript">
      
        function startSetInterval() {
              
            let count = 1;
              
            setInterval(function exampleFunction() {
                console.log('Function Executed! ' + count);
                count = count + 1;
          
                return exampleFunction;
            }(), 3000);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Immediately after clicking the button:
    immed-invoke-immediately
  • After waiting for 3 seconds:
    immed-invoke-after-9

full-stack-img




My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.