How to use setInterval function call in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to use setInterval function call in JavaScript.

The setInterval() method in JavaScript evaluates an expression at intervals. It is used to perform the repetitive tasks or operations that need to be performed in a specific time interval. For example, it calls a function repeatedly in a fixed time delay to perform the task. The window interface offers this method.

This method returns an interval id that uniquely identifies the interval, allowing you to remove it later by executing the clearInterval() method.

Users can follow the below syntax to use the setInterval function.

Syntax

setInterval(function, time, parameter1, parameter2, ...)

In the above syntax, we show all the parameters the setInterval function takes to perform its operations.

Parameters

function − The function or code that will execute in a specific time interval (Required).
time − The interval time in milliseconds (Required).
parameter1, parameter2,... − The parameters to pass to the function (Optional).

Return type

number − The id of the setInterval timer. It is used to stop a setInterval timer by passing it in the clearInterval() function.

Example 1

Digital Clock using the setInterval function

In the below example, we have used the setInterval function in JavaScript to build a digital clock. We have used the Date constructor of JavaScript to get the current time and then change the inner text of an element in every interval of 1 second. The document.getElementById() method is used to access an element object to change the element's innerHTML to show the current time in that.


<html>
<body>
   <h2>Using the<i> setInterval function</i> to build a digital clock in JavaScript</h2>
   <h4>Current Time:</h4>
   <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" >
   </span>
   <script>
      // element to show the current time
      const root = document.getElementById('root')

      // setInterval function
      setInterval(() => {

         // getting the local time
         const date = new Date();
         root.innerHTML = date.toLocaleTimeString();
      }, 1000);
   </script>
</body>
</html>

Example 2

Start and Stop a counter using the setInterval function

In the example below, we have used the setInterval function in JavaScript to increment a counter value and stop the counter value by using two button clicks. There are two buttons, 'Start' and 'Stop'; clicking on them can start the increment of the counter value or stop it, respectively. We have used the clearInterval() function to stop the setInterval function.


<html>
<body>
   <h2>Using the <i>setInterval function</i> to start and stop incrementing a counter value in JavaScript</h2>
   <button onclick = "startFunction()" >Start</button>
   <button onclick = "stopFunction()" >Stop</button>
   <h4>Counter value:</h4>
   <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" > 0 </span>
   <script>      
      // element to show the counter value
      const root = document.getElementById('root')

      // setInterval function id
      let intervalId = null

      // counter variable
      let counter = 0;

      // 'Start' button click handler function
      function startFunction(){

         // assigning the setInterval function to increment the counter value
         intervalId = setInterval(() => {
            root.innerHTML = counter
            counter++;
         }, 1000);
      }
      // 'Stop' button click handler function
      function stopFunction(){
         // stopping the setInterval function using the clearInterval function
         clearInterval(intervalId);
      }
   </script>
</body>
</html>

In this tutorial, we have learned how to use setInterval function call in JavaScript. We have discussed this function's syntax, parameters, and return type. We used the setInterval function in the two examples to build a digital clock and a controllable incremental counter. In addition, we learned the clearInterval function to stop the setInterval timer. Users can follow the examples to understand the functionality of the setInterval function more.