Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

JavaScript | Call a function after a fixed time

  • Last Updated : 26 Jul, 2021

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:  

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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

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

html




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

html




                        <!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 arrow_drop_up
Recommended Articles
Page :