JavaScript Call a function after a fixed time
Last Updated :
04 Mar, 2024
In order to run a function multiple times after a fixed amount of time, we are using few functions.
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).
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
function gfg_Run() {
setInterval(function () {
let node = document.createElement("DIV");
let textnode = document.createTextNode("this is GFG!");
node.appendChild(textnode);
el_body.appendChild(node);
}, 2000);
}
</script>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
let timer;
function gfg_Run() {
timer = setInterval(function () {
let node = document.createElement("DIV");
let textnode = document.createTextNode("this is GFG!");
node.appendChild(textnode);
el_body.appendChild(node);
}, 2000);
}
function gfg_Stop() {
clearInterval(timer);
}
</script>
</body>
</html>
Output:
JavaScript Call a function after a fixed timeExample 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
let timer;
function gfg_Run() {
function gfg_function() {
let node = document.createElement("DIV");
let 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:
JavaScript Call a function after a fixed time
Similar Reads
How to Delay a JavaScript Function Call using JavaScript ? Delaying the execution of a JavaScript function is a powerful technique often achieved using methods like setTimeout(). This approach is commonly used in over 60% of modern web applications to manage animations, control user interactions, or handle asynchronous behavior smoothly. Whether it's for de
2 min read
Finding the time elapsed in JavaScript In this article, we are going to find out the time elapsed between the two-time instances using the Date object of JavaScript. So firstly we will see what is Date object in JavaScript in short. Date Object: A JavaScript Date object deal with dates and times and it is a built-in object. It stores a v
4 min read
How to call a function repeatedly every 5 seconds in JavaScript ? In JavaScript, the setInterval() method allows you to repeatedly execute a function or evaluate an expression at specified intervals. This method is particularly useful for performing periodic tasks like updating a user interface or making repeated API calls.Syntax:Â setInterval(function, millisecond
2 min read
JavaScript - How To Create A Countdown Timer? A countdown timer is a timer that runs for a specific time limit and when that limit get crossed then it stops the timer and the message get displayed on the screen. it can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary.The Basics of a
4 min read
How to implement a function that enable another function after specified time using JavaScript ? Let us assume that we have been given a function add() which takes in two parameters a and b, and returns their sum. We are supposed to implement a function that should be able to call any function after the given delay amount of time. This can be done with the approaches as given below: Approach 1:
2 min read
How to add sleep/wait function before continuing in JavaScript? Adding a sleep/wait function in JavaScript means pausing the execution of code for a specified period. This can be done using `setTimeout` for asynchronous waits or through promises and async/await for more readable and controlled delays in asynchronous functions. Method 1: Using an infinite loop to
2 min read
How to Set Time Delay in JavaScript? Delaying the execution of code is a fundamental technique that is commonly used in JavaScript for tasks like animations, API polling, or managing time intervals between actions. JavaScript provides several built-in methods to set time delays: setTimeout() and setInterval(). We can set time delay in
2 min read
JavaScript Timer A timer has been shown that shows the countdown, and its color/message gets changed after every specific period. Prerequisites: GetMinutes()GetSeconds()SetInterval() MethodSyntax: setTimeout(function, milliseconds, parameter1, ...);Parameter:AttributeDescriptionfunctionIt is the function that will b
2 min read
How to change state continuously after a certain amount of time in React? To change the state continuously allows us to repeatedly update the components state which can be used to implement counters, timers, and other time based components. In this article, we will see how to change state continuously after a certain amount of time in react.ApproachTo change state continu
2 min read