JavaScript | Call a function after a fixed time

In order to run a function multiple times after a fixed amount of time, we are using few functions.
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, ...)

paramters:

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

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)

paramters:

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.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            JavaScript | Call a function 
            after a fixed time.  
        </title>  
    </head>  
      
    <body style = "text-align:center;" 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>  
</html>                     

Output:

Before clicking on the button:
After clicking on the Run button:

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.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            JavaScript | Call a function after a fixed time.  
        </title>  
    </head>  
      
    <body style = "text-align:center;" 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>  
</html>                     

Output:

Before clicking on the button:
After clicking on the Run button:

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.

                        <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            JavaScript | Call a function after a fixed time.  
        </title>  
    </head>  
      
    <body style = "text-align:center;" 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>  
</html>                     

Output:

Before clicking on the button:
After clicking on the Run button:

My Personal Notes

Recommended Posts: