Home » JavaScript

setInterval() Method with Example in JavaScript

JavaScript | setInterval() Method: Here, we are going to learn about the setInterval() method with syntax and examples in JavaScript. Submitted by Siddhant Verma, on January 10, 2020

JavaScript setInterval() method

The setInterval() in JavaScript is an asynchronous function that continuously invoked a callback after every specified delay (in milliseconds). In this article, we'll look at how to use the setInterval() method in JavaScript? We have already seen a simple use case of setInterval() where we built a simple JavaScript timer. Check it out here in case you haven't.

Example

function callback() {
    console.log('This simple callback will be invoked after every 3sec');
}
let repeat = 3000;
setInterval(callback, repeat);

Output

(2) This simple callback will be invoked after every 3sec

As you can see, the setInterval() function takes in two arguments or parameters, a callback function which it executes after every t milliseconds and t milliseconds itself as the second parameter. Here the callback function will be invoked after every 3 sec.

Let's look at another example,

var num = 0;
setInterval(function() {
    num++;
    console.log(num);
}, 1000);

Output

1
2
3
4
5
6
...

Can you see what's happening in the above code? We're logging numbers from 1 to infinity after every second. Since the setInterval() function runs indefinitely, we aren't defining a constraint as to where we have to stop.

But what if we had to stop after a certain interval of time? Is there a way to stop the execution of the setInterval() function?

How setInterval() function works?

The way setInterval() function works internally is that every time you invoke such a function it has a unique ID associated with it. After it's every invocation this unique ID is what the function returns. Therefore to stop the execution of a setInterval() function all we have to do is capture or store that ID somewhere and clear it out whenever we want. Let's see how we can do that,

var num = 0;
var ID = setInterval(function() {
    num++;
    console.log(num);
    if (num == 3) {
        console.log('Function stopped!');
        clearInterval(ID);
    }
}, 1000);

Output

1
2
3
Function stopped!

Let's understand how the above code works. We know that asynchronous functions don't wait for other code blocks to execute and our setInterval() function is an asynchronous function that will run after every one second. Before it even runs for the first time, it's unique setInterval() ID is stored in the ID variable. Then after every 1 second, we start logging numbers from 1 to on the console however when we reach the if condition, we log a simple message and use the clearInterval() method to destroy the setInterval() function by passing its ID as a parameter.

setInterval() could be tricky, especially for your JavaScript interviews so make sure you play around enough to get the hang of it!