How to Execute setInterval Function without Delay for the First Time in JavaScript?

Last Updated : 14 Oct, 2024

When working with JavaScript, the setInterval function is a powerful tool for executing a block of code repeatedly at specified intervals. The setInterval() method always invokes the function after the delay for the first time.

Approach 1: Calling the function once before executing setInterval:

Invoke the function once before using setInterval() for immediate execution.
Set up the setInterval() function with the desired callback after the immediate invocation.
Create a new function that first invokes the original function, then calls setInterval().
This method simulates the setInterval() behavior without a delay for the first execution.

Example: This example shows the implementation of the above-mentioned approach.

html

<!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>

Output:

Immediately after clicking the button:
After waiting for 3 seconds:

Method 2: Using an immediately invoking function inside setInterval function

An Immediately-invoked Function Expression (IIFE) is a function that executes immediately after its declaration.
IIFEs can be used as callbacks in the setInterval() function to ensure immediate execution.
This approach allows the IIFE to run once before the actual setInterval() begins its execution after the specified delay.
Using an IIFE simulates setInterval() behavior without a delay for the first invocation.

Example: This example shows the implementation of the above-mentioned approach.

html

<!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>