How to use setInterval() in JavaScript?

This article shows you a complete understanding of the setInterval() method and its uses in Javascript.

The setInterval() is a method available in the window object. It is a global method, that can be called from anywhere. The setInterval() method, repeatedly calls a function or executes a piece of code, with a fixed time delay(in milliseconds) between each call.

Let’s see a few examples of the setInterval() method below:-

What is setInterval()?

The setInterval() is a global method that executes a callback function or executes a piece of code repeatedly in a specified time interval(in milliseconds).

This method returns an interval ID that uniquely identifies the interval, so we can remove it later by calling clearInterval() method.

Note: 1000 milliseconds = 1 second.

Syntax

var intervalID = setInterval(function, milliseconds, arg1, arg2, …);

Parameters

function –

A callback function is to be executed every specified delay time.

milliseconds [optional]-

The time, in milliseconds that the timer should wait before the specified function to be executed. This is an optional parameter. If this parameter is omitted, a value of 10 is used.

Note: The delay argument is converted to a signed 32-bit integer. This effectively limits delay to 2147483647 ms.

arg1, arg2, … [optional]-

Additional arguments are passed through to the function specified by the function. These arguments are also optional.

Return value

The returned intervalID is a positive integer value that identifies the interval created by the call to setInterval(). This value can be passed to clearInterval() to cancel the interval.

The setInterval uses in Javascript

The followings are a few examples of using the setInterval method in javascript:

Example-1: Displaying count value every 2 seconds interval.

// displaying count in every 2 seconds interval
var count=1;
setInterval(function(){
      console.log("count=> "+count++);
}, 2000);


//Output in browser console:

//count=> 1
//count=> 2
//count=> 3
//....
//....

Example-2: Passing the additional parameters to setInterval()

// Here messages will be displayed in each 3 seconds

setInterval(function(arg1,arg2){
      console.log("Received parameters value :"+arg1+", " +arg2);
}, 3000, "param1", "param2");

//Output see in browser console:

//Received parameters value :param1, param2
//Received parameters value :param1, param2
//...
//...

Example-3: Showing a digital watch

<p id="digital-watch">00:00:00</p>
<script>
setInterval(function() {
  const date = new Date();
  document.getElementById("digital-watch").innerHTML = date.toLocaleTimeString();
}, 1000); 
</script>

00:00:00

Clearing the setInterval()

The global clearInterval() method clears or cancels an interval previously established by calling setInterval(). The setInterval method returns an intervalID (an integer value) which is used by the clearInterval() method to clear the interval.

For example: Changing the background color of a box in 1 second of the interval with a specified list of colors. And on the stop button click, stopping the color change.

<p>Changing background color of box</p>
<div id="box1" style="height:100px;width:100px;background:orange;margin-bottom:10px;"></div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<script>
var count=0;
    var intervalId=null;
    var colors=['red','green','yellow','blue','orange'];
    function start(){ 
    if(intervalId==null){
      intervalId=setInterval(function(){
          var box1=document.getElementById('box1');
          box1.style.background=colors[count++];     
          if(count==5){
              count=0;
          }
        },1000);
      }
  }
function stop(){ 
    clearInterval(intervalId);
    intervalId =null;
}

//starting by default
start();
</script>

Output:

Changing background color of box

How to execute setInterval() without delay for the first time?

The functionality of the setInterval() method is to execute a function or piece of code repeatedly at a specified delay. So for the first time also it takes a specified delay time to execute.

Now, let’s see a few solutions to execute the setInterval method without delay for the first time:

Solution#1: Using IIFE (Immediately-invoked Function Expression)

The IIFE is a type of function that immediately gets invoked after its declaration. With the help of this, the setInterval() executes function without a delay for the first time.

For Example:

<p id="demo"></p>
<script>
  let count=1;
  setInterval(function displayCount() {
      document.getElementById("demo").innerHTML=count++;
      return displayCount;
  }(), 3000);
</script>

//Output
//display the count immediately without waiting for 3 seconds first time

Solution#2: Calling method one time before executing setInterval

Define the logic inside a method and call that method once before executing setInterval. This will execute the function once immediately and then the setInterval() function can be set with the required callback function.

For Example:

<p id="demo"></p>
<script>
let count=1;
function displayCount(){
   document.getElementById("demo").innerHTML=count++;
}
//calling this method once before setInterval
displayCount();
setInterval(function(){
   displayCount();
}, 5000);
</script>

//Output
//display the count immediately without waiting for 5 seconds first time

How to change the time interval of setinterval() at runtime?

Once the interval has been created there is no chance to change its interval time at runtime. But if we clear the previous interval and create a new interval with a new time delay it’s possible to do.

Solution#1: Using clearInterval() method

We have to clear the previously created interval whenever we need to change the interval time. To clear the interval, interval ID needs to be passed which is returned by setInterval() method.

For Example:

<p id="demo"></p>
<button onclick="updateIntervalTime()">Update</button>
<script>
var count=1;
var delay=1000;//1 sec
var intervalID=null;
function displayCount(){
   intervalID=setInterval(function(){
       document.getElementById("demo").innerHTML=count++;
   }, delay);
   
}
//first time calling
displayCount();

function updateIntervalTime(){
    clearInterval(intervalID);
    //increasing delay time by 1 second
    delay = delay + 1000;
    displayCount();
}
</script>

setInterval() vs setTimeout() in Javascript

The following table describes the basic difference between setInterval and setTimeout methods:

Conclusion

In this article, you have seen how do we use the setInterval() method in javascript. Learn more about setInterval() method.

See few application programs created using setInterval() method,

Spinning wheel application

Traffic signal lights application

FAQ

Related Articles:

• How to use setTimeout() in JavaScript?

You may also like:

• File upload validations in javascript
• Preview an image before uploading using Javascript
• Preview an image before uploading using jQuery
• File Upload in Java Servlet Example
• Multiple file upload in Java with Progress bar – Ajax