Flash cards
Review the key moves
What is the main idea behind JavaScript Timing Events?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<p id="___"></p> <script> // Call showTime every 1000 millisecPut the learning moves in the order that makes the concept easiest to apply.
Timing Events let you run code
- After a Delay
- Or Repeatedly
Timing is driven by Timing Events generated by the system clock.
Timer Functions
| Function | Description |
|---|---|
| setTimeout() | Sets a clock timeout (runs once) |
| setInterval() | Sets a clock interval (runs repeatedly) |
| clearTimeout() | Clears a timeout |
| clearInterval() | Clears an inteval |
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>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>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. |
setInterval()The setTimeout() method executes a function only once after a delay.
The setInterval() method executes a function repeatedly at every interval.