JavaScript Timing Events
Timing Events let you run code:
- After a Delay
- Or Repeatedly
Timing is driven by Timing Events generated by the system clock.
Timer Fuctions
| Function | Description |
|---|---|
| setTimeout() | Sets a clock timeout (runs once) |
| setInterval() | Sets a clock interval (runs repeatedly) |
| clearTimeout() | Clears a timeout |
| clearInterval() | Clears an inteval |
Note
The timer functions belong to the window object.
setTimeout() is the same as window.setTimeout().
A Clock
Example
<p id="clock"></p>
<script>
// Call showTime every 1000 millisec
setInterval(showTime, 1000);
// Fuction to display the time
function showTime() {
const d = new Date();
document.getElementById("clock").innerHTML =
d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
</script>
Try it Yourself »
The setTimeout() Method
The setTimeout() method executes a function after a delay in milliseconds.
setTimeout(function, delay, p1,...,pN)
Parameters
| Parameter | Description |
|---|---|
| function | Required. The function to be called when the timer expires. |
| delay | Optional. The milliseconds the timer should wait. Defalt 0 (immediately). |
| p1,...,pN | Optional. Arguments passed to the function. |
Return Value
| Type | Description |
|---|---|
| Integer | An integer that uniquely identifies the timer. This "timeout ID" can later be passed to clearTimeout() to cancel the timer. |
Example
<button id="btn">Start</button>
<p id="demo"></p>
<script>
// let btn listen for a click
document.getElementById("btn").addEventListener("click", function () {
// Then call showMsg after 2 seconds
setTimeout(showMsg, 2000);
});
// Function to display message
function showMsg() {
document.getElementById("demo").innerHTML = "Hello after 2 seconds!";
}
</script>
Try it Yourself »
Note
The setTimeout() method is a core part of asynchronous JavaScript,
allowing code execution to be scheduled without blocking the main execution thread.
The SetInterval()Method
The setInterval() method calls a function repeatedly.
setInterval(function, delay, p1,...,pN)
Parameters
| Parameter | Description |
|---|---|
| function | Required. The function to be called for every interval. |
| delay | Optional. The milliseconds between each function call. Defalt 0. |
| p1,...,pN | Optional. Arguments passed to the function. |
Return Value
| Type | Description |
|---|---|
| Integer | An integer that uniquely identifies the timer. This "timeout ID" can later be passed to clearInterval() to cancel the timer. |
Example
setInterval() used with
clearInterval():
<button id="start">Start Counter</button>
<button id="stop">Stop</button>
<p id="counter">0</p>
<script>
let myInterval;
let count = 0;
const btnStart = document.getElementById("start");
const btnStop = document.getElementById("stop");
// let btnStart listen for a click
document.getElementById("start").addEventListener("click", function () {
// Then start counter
myInterval = setInterval(counter, 1000);
});
// let btnStop listen for a click
document.getElementById("stop").addEventListener("click", function () {
// Then stop counter
clearInterval(myInterval);
});
function counter() {
count++;
document.getElementById("counter").innerHTML = count;
}
</script>
Try it Yourself »
Note
The setTimeout() method executes a function only once after a delay.
The setInterval() method executes a function repeatedly at every interval.
