Javascript setInterval()

In this tutorial, you will learn about the JavaScript setInterval() method with the assistance of examples.

The JavaScript setInterval() strategy executes a predetermined function on various times at set time intervals determined in milliseconds (1000ms = 1second).

The JS setInterval() technique will continue to call the predetermined function until the clearInterval() strategy is called or the window is closed.

The JavaScript setInterval() technique returns an ID that can be used by the clearInterval() strategy to stop the interval.

If you just need to execute a function one time, use the setTimeout() method.

In JavaScript, a block of code can be executed in specified time intervals. These time intervals are called timing events.

There are two strategies for executing code at specific intervals. They are:

• setInterval()
• setTimeout()

In this tutorial, you will learn about the setInterval() method.

---

JavaScript setInterval()

The setInterval() strategy repeats a block of code at each given timing event.

The usually used syntax of JavaScript setInterval is:

setInterval(function, milliseconds);

Its parameters are:

• function – a function containing a block of code
• milliseconds – the time interval between the execution of the function

The setInterval() method returns an intervalID which is a positive integer.

---

Example 1: Display a Text Once Every 1 Second

// program to display a text using setInterval method
function greet() {
    console.log('Hello world');
}

setInterval(greet, 1000);

Output

Hello world
Hello world
Hello world
Hello world
Hello world
....

In the above program, the setInterval() strategy calls the greet() function each 1000 milliseconds(1 second).

Consequently, the program shows the content Hello world once every 1 second.

Note: The setInterval() technique is useful when you need to repeat a block of code at different times. For instance, demonstrating a message at a fixed interval.

---

Example 2: Display Time Every 5 Seconds

// program to display time every 5 seconds
function showTime() {

    // return new date and time
    let dateTime= new Date();

    // return the time
    let time = dateTime.toLocaleTimeString();

    console.log(time)
}

let display = setInterval(showTime, 5000);

Output

"5:15:28 PM"
"5:15:33 PM"
"5:15:38 PM"
....

The above program displays the current time once every 5 seconds.

new Date() gives the current date and time. And toLocaleTimeString() returns the current time.

---

JavaScript clearInterval()

As you have found in the above example, the program executes a block of code at each predetermined time interval. On the off chance that you need to stop this function call, at that point you can use the clearInterval() strategy.

The syntax of clearInterval() strategy is:

clearInterval(intervalID);

Here, the intervalID is the return value of the setInterval() method.

---

Example 3: Use clearInterval() Method

// program to stop the setInterval() method after five times

let count = 0;

// function creation
let interval = setInterval(function(){

    // increasing the count by 1
    count += 1;

    // when count equals to 5, stop the function
    if(count === 5){
        clearInterval(interval);
    }

    // display the current time
    let dateTime= new Date();
    let time = dateTime.toLocaleTimeString();
    console.log(time);

}, 2000);

Output

4:47:41 PM
4:47:43 PM
4:47:45 PM
4:47:47 PM
4:47:49 PM

In the above program, the setInterval() technique is used to show the current time every 2 seconds. The clearInterval() technique stops the function call after 5 times.

---

You can also pass additional arguments to the setInterval() method. The syntax is:

setInterval(function, milliseconds, parameter1, ....paramenterN);

At the point when you pass additional parameters to the setInterval() strategy, these parameters (parameter1, parameter2, and so on) will be passed to the specified function.

For instance,

// program to display a name
function greet(name, lastName) {
    console.log('Hello' + ' ' + name + ' ' + lastName);
}

// passing argument to setInterval
setInterval(greet, 1000, 'Salman', 'Khan');

Output

Hello Salman Khan
Hello Salman Khan
Hello Salman Khan
....

In the above program, two parameters Salman and Khan are passed to the setInterval() technique. These two parameters are the arguments that will be passed to the function (here, greet() function) that is characterized inside the setInterval() method.

---

Note: If you only need to execute a function one time, it’s better to use the setTimeout() method.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JavaScript Asynchronous