Viewing: www.geeksforgeeks.org

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

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.

[5.gif]

Note: Since thesetInterval()method executes the function infinitely hence there is a method called asclearInterval()to stop the execution of thesetInterval().

Example 3:In this example, we will first execute asetInterval()function and then stop its execution by using theclearInterval()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>

Output: When the stop button is clicked the execution is stopped.

[alert2.gif]

JavaScript setInterval() Method

Syntax:

Return Value:

Explore