The setInterval function in JavaScript serves the purpose of executing a designated function repeatedly at defined time intervals. It assesses an expression or invokes a function at specified intervals. This operation persists in calling the function until either the window is shut down or the clearInterval function is invoked. Additionally, this method yields a numeric value or a non-zero identifier that corresponds to the timer that has been established.
In contrast to the setTimeout method, the setInterval method calls the specified function repeatedly at specified intervals. This method can be utilized with or without the window prefix.
The frequently utilized syntax for the setInterval method is outlined below:
Syntax
window.setInterval(function, milliseconds);
Parameter values
This approach accepts two parameters: function and milliseconds, which are defined in the following manner.
function: It refers to the segment of code that encompasses the instructions to be executed.
milliseconds: This parameter indicates the duration of the time gap between successive executions. The interval is measured in milliseconds and determines the frequency of code execution. Should its value fall below 10, the system will default to using the value of 10.
How to stop the execution?
The clearInterval function can be utilized to halt the operation of the function that was designated in the setInterval method. The identifier returned by the setInterval method serves as the parameter for the clearInterval function, allowing for the cancellation of the interval.
Let us explore the application of the setInterval method through various examples.
Example1
This serves as a straightforward illustration of utilizing the setInterval function. In this instance, an alert dialog box appears every 3 seconds. We are not implementing any mechanism to halt the execution of the function defined within the setInterval function. Consequently, the function will keep executing indefinitely until the browser window is closed.
<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, an alert dialog box displays on every three seconds. </p>
<script>
var a;
a = setInterval(fun, 3000);
function fun() {
alert(" Welcome to the logic-practice.com ");
}</script>
</body>
</html>
Output
Following a duration of three seconds, the resulting output will be -
Here is an additional illustration of how to utilize the setInterval function.
Example2
In this scenario, the background color will be altered every 200 milliseconds. We are not implementing any technique to halt the functioning of the function defined within the setInterval method. Consequently, this method will persistently execute the function until the browser window is closed.
<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, the background color changes on every 200 milliseconds. </p>
<script>
var var1 = setInterval(color, 200);
function color() {
var var2 = document.body;
var2.style.backgroundColor = var2.style.backgroundColor == "lightblue" ? "lightgreen" : "lightblue";
}
</script>
</body>
</html>
Output
The background color will transition between light green and light blue at a frequency of every 200 milliseconds. Following this interval of 200 milliseconds, the resulting output will be -
Example3
In the preceding illustration, no method was employed to halt the color toggling process. In this case, we will utilize the clearInterval function to cease the toggling of colors as demonstrated in the earlier example.
It is necessary to click on the designated stop button in order to observe the resulting effect.
<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, the background color changes on every 200 milliseconds. </p>
<button onclick = "stop()"> Stop </button>
<script>
var var1 = setInterval(color, 200);
function color() {
var var2 = document.body;
var2.style.backgroundColor = var2.style.backgroundColor == "lightblue" ? "lightgreen" : "lightblue";
}
function stop() {
clearInterval(var1);
}
</script>
</body>
</html>
Output
The background color will begin to shift after a delay of 200 milliseconds. When the designated stop button is clicked, the alternating colors will cease, locking in the current background color. The result following the button press will be -