JavaScript - Timing Events

Quiz

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.

Print Page