JavaScript | Call a function after a fixed time

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:  
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:  
manikarora059
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?