JavaScript Call a function after a fixed time

Last Updated : 04 Mar, 2024

In order to run a function multiple times after a fixed amount of time, we are using few functions.

JavaScript setInterval() Method

This method calls a function at specified intervals(in ms). This method will call continuously the function until clearInterval() is run, or the window is closed.

Syntax:

setInterval(fun, msec, p1, p2, ...)

Parameters:

fun: It is required parameter. It holds the function to be executed.
msec: It is required parameter. The time intervals (in milliseconds) after how long to execute the code. If the value is less than 10, then 10 is used.
p1, p1, ...: It is optional parameter. The parameters pass to the function as an arguments. (Not supported in IE9 and earlier).

JavaScript clearInterval() Method

This method clears the timer which is set by the setInterval() method. The ID value returned by setInterval() method is used as the parameter for this method.

Syntax:

clearInterval(varSetInt)

Parameters:

varSetInt: It is required parameter. This is the name of timer returned by the setInterval() method.

Example 1: This example sets a function, which append a <div> element to the <body> continuously after 2 seconds.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="body">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="color:green;"></p>


    <button onclick="gfg_Run()">
        Run
    </button>

    <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>


    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        let el_body = document.getElementById("body");
        el_up.innerHTML = JSON.stringify(GFG_object);

        function gfg_Run() {
            setInterval(function () {
                let node = document.createElement("DIV");
                let textnode = document.createTextNode("this is GFG!");
                node.appendChild(textnode);
                el_body.appendChild(node);
            }, 2000);
        }
    </script>
</body>

</html>

Output:

JavaScript Call a function after a fixed time

Example 2: This example sets a function, which appends a <div> element to the <body> continuously after 2 seconds and stops appending when Stop button is clicked.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="body">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="color:green;"></p>
    <button onclick="gfg_Run()">
        Run
    </button>

    <button onclick="gfg_Stop()">
        Stop
    </button>

    <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        let el_body = document.getElementById("body");
        el_up.innerHTML = JSON.stringify(GFG_object);
        let timer;
        function gfg_Run() {
            timer = setInterval(function () {
                let node = document.createElement("DIV");
                let textnode = document.createTextNode("this is GFG!");
                node.appendChild(textnode);
                el_body.appendChild(node);
            }, 2000);
        }
        function gfg_Stop() {
            clearInterval(timer);

        }
    </script>
</body>

</html>

Output:

Example 3: This example sets a function, which append a <div> element to the <body> continuously after 1 seconds with a different approach than the previous one and stops appending when Stop button is clicked.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="body">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="color:green;"></p>


    <button onclick="gfg_Run()">
        Run
    </button>

    <button onclick="gfg_Stop()">
        Stop
    </button>

    <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>


    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        let el_body = document.getElementById("body");
        el_up.innerHTML = JSON.stringify(GFG_object);
        let timer;

        function gfg_Run() {
            function gfg_function() {
                let node = document.createElement("DIV");
                let textnode = document.createTextNode("this is GFG!");
                node.appendChild(textnode);
                el_body.appendChild(node);
            }
            timer = setInterval(gfg_function, 1000);
        }
        function gfg_Stop() {
            clearInterval(timer);

        }
    </script>
</body>

</html>

Output:

JavaScript Date setTime() Function

PranchalKatiyar

Improve

Article Tags :

JavaScript Call a function after a fixed time

JavaScript setInterval() Method

Syntax:

Parameters:

JavaScript clearInterval() Method

Syntax:

Parameters:

Similar Reads

Thank You!

What kind of Experience do you want to share?