Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to trigger the setInterval loop immediately using JavaScript?
The setInteral() 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 the 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.
Example
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> setInteral() </i> method to invoke the particular function continuosly </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 setInteraval() method invokes the func() function for the first time after 3000 milliseconds.
Users can follow the approaches below to invoke the func() function at 0 milliseconds for the first time.
Invoke the function for the first time, and after that, use the setInterval() method
The one approach to invoke the function for the first time without delay while using the setInterval() method is calling the function for the first time.
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
Users can follow the syntax below to invoke the function without delay for the first time while using the setInterval() method.
func_name() setInterval(func_name, 1000);
In the above syntax, we have invoked the func_name() function for the first time, and after invoking it every 1000 milliseconds.
Example
In the example below, the func() function prints the message we invoke after every 1000 milliseconds using the setInterval() method. To invoke the function for the first time without delay, we invoke the function the first time, and after, we invoke the function using the setInteral() method.
<html>
<body>
<h3> Invoking the function for the first time and, after that, using the setInteral() method to invoke the particular function continuously. </h3>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
function func() {
output.innerHTML += "The func() function is invoked!" + "<br>";
}
func()
setInterval(func, 1000);
</script>
</html>
Create an immediately invoked function in the setInteral() method
The immediately invoked function invokes the function expression immediately once we create it. So, we can use an immediately invoked function expression to invoke the function without delay for the first time. We can also use the setInterval() method inside the function to execute the function in a particular interval.
Syntax
Users can follow the syntax below to use the immediately invoked function expression to execute the function without delay while using the setInterval() method.
(function name() {
setInterval(name, 3000);
})()
In the above syntax, we have written the function expression in the braces, and after that, we have written opened and closed braces to invoke the function immediately.
Example 3
The example below creates a test function to invoke after every interval using the setInterval() method. We have written the test() function as an immediately invoked function expression and use the setInterval() method inside the function calling the test() function after every 3000 milliseconds.
We can observe the output that the test function invokes at 0th milliseconds for the first time as we refresh the web page, and then it invokes after every 3000 milliseconds.
<html>
<body>
<h3> Using the immediately invoked function expression to invoke the function without delay for the first time while using the setInteral() method </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>
Users learned to invoke the function used in the setInterval() method without delay for the first time. Either user can invoke the function for the first time or use the immediately invoked function expression.
It is recommended to call the function for the first time rather than using the immediately invoked function expression, as it invokes the function recursively. After some intervals, the immediately invoked function expression invokes the function for infinite times when we use the setInterval() method inside that.
2K+ Views
