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> |
Output:
JavaScript Call a function after a fixed time
