JavaScript setInterval() Method

Last Updated : 22 Jan, 2024

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).

Javascript

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.

HTML

<!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.

HTML

<!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>