JavaScript setInterval() Method
The setInterval() method calls a function at specified intervals (in milliseconds). It continues calling the function until clearInterval() is called or the window is closed. This method is useful for tasks that need periodic execution, like updating animations or refreshing data.
Important Note:
setTimeout()is for executing a function once after a specified delay.setInterval()is for executing a function repeatedly at specified intervals until explicitly cleared.
Syntax:
setInterval(function, delay);
function: The function to be executed at each interval.delay: The time, in milliseconds, between each execution of the function.
Return Value:
Returns a Number which is basically the id of the timer.
Example 1: Here, myFunction will be executed every second (1000 milliseconds).
function myFunction() {
console.log("Executing at regular intervals!");
}
// Call myFunction every 1000 milliseconds (1 second)
setInterval(myFunction, 1000);
Output: (Will be printed after 1 sec or 1000ms)
Executing at regular intervals!
Example 2: Here, we are using setInterval() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Document</title>
</head>
<body>
<p id="GFG"></p>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
document.getElementById("GFG")
.innerHTML += "<p>Hi</p>";
}
</script>
</body>
</html>
Output: After every second a new “hi” message will be displayed.
Note: Since the setInterval() method executes the function infinitely hence there is a method called as clearInterval() to stop the execution of the setInterval().
Example 3: In this example, we will first execute a setInterval() function and then stop its execution by using the clearInterval() function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Document</title>
</head>
<body>
<p id="GFG"></p>
<button onclick="clearInterval(myVar)">
Stop Execution</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
document.getElementById("GFG")
.innerHTML += "<p>Hi</p>";
}
</script>
</body>
</html>
Output: When the stop button is clicked the execution is stopped.