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

19 Nov, 2019
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:
<!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 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:
<!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>
Output:
Immediately after clicking the button:
After waiting for 3 seconds:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
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 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills