Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to trigger the setInterval loop immediately using JavaScript?
The setInterval() method allows us to continuously trigger a callback function after every particular time period. We can pass the callback function as the first parameter to trigger after every time period, and the time period in milliseconds as a second parameter.
The setInterval() method invokes the callback function after a particular number of milliseconds for the first time. Now, the problem is we need to invoke the callback function instantly for the first time at 0 milliseconds, and after that, we need to invoke it continuously in the given time period.
The Default Behavior Problem
In the example below, we created the func() function, which prints the message in the document. We have used the setInterval() method, which invokes the func() function after every 3000 milliseconds.
<html>
<body>
<h3>Using the <i>setInterval()</i> method to invoke the particular function continuously</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
output.innerHTML += "Please wait ...." + "<br>";
function func() {
output.innerHTML += "The func() function is invoked!" + "<br>";
}
setInterval(func, 3000);
</script>
</body>
</html>
In the output, users can observe that setInterval() method invokes the func() function for the first time after 3000 milliseconds, creating an initial delay.
Method 1: Invoke Function Immediately, Then Use setInterval()
The most straightforward approach to invoke the function for the first time without delay is calling the function manually before starting the interval.
When we invoke the function for the first time, it executes at 0th milliseconds. After that, the setInterval() method executes the function continuously after a certain time period.
Syntax
func_name(); setInterval(func_name, 1000);
Example
In the example below, the func() function prints a message. We invoke it immediately first, then use setInterval() to continue the execution every 1000 milliseconds.
<html>
<body>
<h3>Invoking the function immediately and then using setInterval()</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
function func() {
output.innerHTML += "The func() function is invoked!" + "<br>";
}
func(); // Immediate execution
setInterval(func, 1000); // Continue every 1 second
</script>
</body>
</html>
Method 2: Using Immediately Invoked Function Expression (IIFE)
The immediately invoked function expression (IIFE) invokes the function immediately once we create it. We can use an IIFE to invoke the function without delay for the first time and include the setInterval() method inside the function.
Syntax
(function functionName() {
// Function body executes immediately
setInterval(functionName, 3000);
})();
Example
The example below creates a test function using IIFE. The function executes immediately when the page loads, then continues executing every 3000 milliseconds.
<html>
<body>
<h3>Using IIFE to invoke function without delay</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
(function test() {
output.innerHTML += "The test() function is invoked!" + "<br>";
setInterval(test, 3000);
})();
</script>
</body>
</html>
Comparison of Methods
| Method | Pros | Cons | Recommended |
|---|---|---|---|
| Manual Call + setInterval | Simple, clear, easy to control | Two separate statements | Yes |
| IIFE with setInterval | Self-contained, single statement | More complex, harder to stop | Sometimes |
Best Practice
It is recommended to call the function for the first time manually rather than using the immediately invoked function expression. The manual approach is cleaner, easier to understand, and provides better control over the interval execution.
<html>
<body>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let intervalId;
function func() {
output.innerHTML += "Function executed: " + new Date().toLocaleTimeString() + "<br>";
}
// Immediate execution
func();
// Start interval
intervalId = setInterval(func, 2000);
// Optional: Clear interval after some time
setTimeout(() => {
clearInterval(intervalId);
output.innerHTML += "Interval stopped<br>";
}, 10000);
</script>
</body>
</html>
Conclusion
To trigger setInterval immediately, call your function once before starting the interval. This approach provides immediate execution and continuous repetition with better control than using IIFE patterns.
5K+ Views
