JavaScript Call a function after a fixed time

0 0 2 minutes read

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

<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> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var el_body = document.getElementById("body"); 
        el_up.innerHTML = JSON.stringify(GFG_object); 
          
        function gfg_Run() {  
            setInterval(function() { 
                var node = document.createElement("DIV");          
                var textnode = document.createTextNode("this is GFG!"); 
                node.appendChild(textnode);  
                el_body.appendChild(node); 
            }, 2000); 
        } 
    </script> 
</body>

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

<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> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var el_body = document.getElementById("body"); 
        el_up.innerHTML = JSON.stringify(GFG_object); 
        var timer; 
        function gfg_Run() {  
            timer = setInterval(function() { 
                var node = document.createElement("DIV");          
                var textnode = document.createTextNode("this is GFG!"); 
                node.appendChild(textnode);  
                el_body.appendChild(node); 
            }, 2000); 
        } 
        function gfg_Stop() { 
            clearInterval(timer); 
          
        } 
    </script> 
</body>

Output:

JavaScript Call a function after a fixed time

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

<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> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var el_body = document.getElementById("body"); 
        el_up.innerHTML = JSON.stringify(GFG_object); 
        var timer; 
          
        function gfg_Run() {  
            function gfg_function() { 
                var node = document.createElement("DIV");          
                var 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>