JavaScript - setInterval() Method

JavaScript setInterval() Method

In JavaScript, the setInterval() is a window method that is used to execute a function repeatedly at a specific interval. The setTimeout() Method allows you to execute the function only once after the specified time.

The window object contains the setInterval() method. However, you can execute the setInterval() Method without taking the window object as a reference.

Syntax

Following is the syntax to use the setInterval() method in JavaScript

setInterval(callback,interval, arg1, arg2, ..., argN);

The first two parameters are required others are optional.

Parameters

• Callback − It is a callback function that will be executed after every interval.
• Interval − It is the number of milliseconds after the callback function should be executed.
• Arg1, arg2, arg3, , argN − They are multiple arguments to pass to the callback function.

Return Value

The setInterval() method returns the numeric id.

Example

In the code below, the startTimer() function uses the setInterval() method to call the timer() function after every 1000 milliseconds.

The timer() function increases the value of the second global variable every time it is called by the setInterval() method and prints the counter.

You can click the button to start a timer in the output.

   Start Timer
   
 
   

Output

Arrow Function with setInterval() Method

The below example contains almost the same code as the above example. Here, we have passed the arrow function as a first argument of the setInterval() method rather than passing the function name only. You can click the button to start the timer.

Example

   Start Timer
   
 
   

Output

Passing More than 2 Arguments to setInterval() Method

In the code below, we have passed 3 arguments to the setInterval() method. The first argument is a callback function to print the date, the second argument is an interval, and the third argument will be passed to the callback function.

Example

   Start Date Timer
   
 
   

Output

The clearInterval() Method in JavaScript

The JavaScript clearInterval() method is used to stop the code execution started using the clearItnerval() method.

It takes the numeric id returned by the setInterval () method as an argument.

Syntax

Follow the syntax below to use the clearInterval() method.

clearInterval(id);

Here id is an id returned by the setInterval() method.

Example

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.

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 Case of the setInterval() Method

In the above examples, we have printed the messages using the setInterval() method. In this section, we will see the real-time use cases of the setInterval() method.

Here, we have listed some of the real-time use cases.

• To refresh the date
• For slideshow
• For animation
• To show the clock on the webpage
• To update live cricket score
• To update weather information
• To run cron jobs

Here are the real-time examples of the setInterval() method.

Flipping the color of the HTML element after each interval

In the code below, we flip the color of the

element after every second.

We have defined the div element in the HTML body.

In the section, we have added the red and green classes. Also, we added the background color in the red and green classes.

In JavaScript, we have passed the callback function as the first argument of the setInterval() method, which will be called after every 1000 milliseconds.

We access the

element in the callback function using its id. After that, we check whether the classList of the

element contains the red class. If yes, we remove it and add the green class. Similarly, if classList contains the green class, we remove it and add the red class.

This is how we are flipping the color of the

element using the setInterval() method.

Example

   


   
Using setInterval() method to flip the color of the HTML element after each interval
   
 
   

Output

Moving Animation Using the setInterval() Method

In the code below, we create moving animation using the setInterval() method.

We have created the two nested div elements. The outer div has the parent id, and the inner div has the child id. We have set dimensions for both div elements and position to relative.

In JavaScript, we have initialized the left variable with 0. After that, we invoke the callback function of the setInterval() method after every 50 milliseconds.

In each interval, we change the position of the

element by 5px, and when the left position becomes 450px, we stop the animation.

Example

Output

You can also use the setInterval() method to run the particular code asynchronously.

Print Page

Previous

Next

Advertisements