JavaScript setInterval() method is used to repeatedly execute a given function at specified intervals.
The setInterval() method continues calling the function until clearInterval() is called or the window is closed.
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.