Using JavaScript setInterval with clearInterval: 4 demos

The setInterval method in JavaScript

The setInterval method is used to repeat the execution of a function or code at the given duration. The duration is specified in milliseconds.

Once the setInterval method is invoked, it will keep on repeating the execution until the window is closed or stopped by using the clearInterval method.

This is how you may use the setInterval method of JavaScript:

1	setInterval (JS_Function ()|Code, duration_in_milliseconds);

 

Alternatively, you may use this with window object as well:

1	window.setInterval (JS_Function ()|Code, duration_in_milliseconds);

 

Following are a few demos to explain how JavaScript setInterval method works. The third example also demonstrates how you may use the clearInterval method to stop executing setInterval method.

An example to display simple alert every 3 seconds

In this example, a simple alert is shown with an interval of three seconds. The setInterval method is executed in a JS function that runs as you click the button once. After that, the alert will keep on showing every three seconds until you close the window or refresh the demo page.

See online demo and code

This is how the setInterval method is used in above example:

This function is attached to the click event of the button.

An example of setInterval for Changing the background color of div every second

In this example, a div tag is used with an initial background color. As the demo page loads, the div background color will be switched between two colors; green and blue by using the JavaScript setInterval method. See the demonstration online:

See online demo and code

The following JS code runs as web page loads:

Stopping this color switching by clearInterval method example

The color toggle in above example will go on until you close the web page. In order to stop the execution of the setInterval method, you may use the clearInterval method.

In this demo, I am just extending the above example, where a button is given to stop the toggle of color.

See online demo and code

The duration in setInterval method is kept 100 milliseconds:

1	var stoptoggle = setInterval(function(){ func_setInterval() }, 100);

 

This time, I used a variable which is assigned the return value of setInterval method. The setInterval method returns the ID of the timer that you may use in the clearInterval method to cancel the timer.

Notice this function where clearInterval method is executed:

1 2 3 4 5

function clearint(){   clearInterval(stoptoggle);   }

 

You see, stoptoggle variable was assigned the return value or ID of the timer. The clearint function is called at the click event of the button that stops or clears the function set by using the setInterval method.

An example of displaying time by using setInterval method

In this example, current local time is displayed by using the setInterval JavaScript method. First, a date object is created and time is assigned by using the toLocaleTimeString function.

After that, the current time is displayed in a div element. The timer function is called every second by using the setInterval JS method.

See online demo and code

Following JavaScript code is used in the example: