JavaScript setInterval() Method - Coding

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.

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>

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

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
ES6 Tutorial
Copy Constructor in JavaScript
Types of Arrays in JavaScript
How to convert a Map into a Set in JavaScript?
How to convert a Set to Map in JavaScript?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	19