What are the Timing Events?
JavaScript timing events are used to execute the code after a specified time only once or multiple times. In JavaScript, you can use the timing events to control when a particular task should be executed.
The ‘window’ object contains the various methods for timing events, which you can use to schedule the tasks. You can call these methods using the window object or without using it.
Here is the list of methods that can be used to schedule the tasks.
| Method | Description |
|---|---|
| setTimeout() | To execute the code after N number of milliseconds only once. |
| clearTimeout() | To clear the timeout, which was set using the setTimeOut() method. |
| setInterval() | To execute the particular task after each N milliseconds. |
| clearInterval() | To clear the interval, which was set using the setInterval() method. |
Let’s understand the timing events via the example below.
The setTimeout() Method
<html>
<body>
<div id = "output">The message will be printed after 2000 milliseconds! <br></div>
<script>
setTimeout(() => {
document.getElementById('output').innerHTML += 'Hello World <br>';
}, 2000);
</script>
</body>
</html>
Output
The message will be printed after 2000 milliseconds!
Hello World
The clearTimeout() Method
In the below example, we used the setTimeout() method to print the ‘hello world’ after 3000 milliseconds. We used clearTimeout() method to prevent setTimeout() method to execute.
Example
<html>
<body>
<p>Message will print after 3 seconds.</p>
<p>Click the button to prevent timeout to execute.</p>
<p id="demo"></p>
<button onclick="stop()">Clear Timeout</button>
<script>
const myTimeout = setTimeout(greet, 3000);
function greet() {
document.getElementById("demo").innerHTML = "Hello World!"
}
function stop() {
clearTimeout(myTimeout);
}
</script>
</body>
</html>
Output
The setInterval() and clearInterval() Methods
In the code below, we have used the setInterval() method to show the number after incrementing by 10 and after each second.
When the number becomes 50, we stop the timer using the clearInterval() method.
Example
<html>
<body>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let number = 10;
let id = setInterval(() => {
if (number == 50) {
clearInterval(id);
output.innerHTML += "The time is stopped."
}
output.innerHTML += "The number is: " + number + "<br>";
number += 10;
}, 1000);
</script>
</body>
</html>
Output
The number is: 10
The number is: 20
The number is: 30
The number is: 40
The time is stopped.The number is: 50
Real-time Use Cases of Timing Events
Here, you will learn the real-time use cases of the timing events.
- For animation and transition
- For slideshow and carousel
- For countdown timers
- For user authentication timeouts
- To autosave drafts like Google docs
- To schedule notifications, email, message, etc.
- To terminate the session as like banking websites
- For progress bar
However, there are other use cases also. You can use the setTimeOut() or setInterval() methods to achieve the above functionalities.
Whats Next?
In the following chapters, you will learn setTimeOut() and setInterval() methods in detail.
Leave a Reply