Window setInterval() Method in JavaScript

March 3, 2021

Window.setInterval( ) method used to execute specified code periodically.

This method was introduced in JavaScript 1.2. It is related to setTimeout.

setInterval() Method Syntax

We can use either of the following syntaxes.

The first syntax:

window.setInterval(code, interval);

Where code is a string of JS code that you want to execute periodically. Make sure to add semicolons to separate multiple statements.

interval is an integer value in milliseconds.

The second syntax:

window.setInterval(function, interval, args...);

Where function(required) is nothing but JS code as a function. IE 4 and earlier versions don’t support this parameter.

In args parameters(optional) we can pass any number of parameters. Not supported in IE 9 and earlier versions.

What does it return?

Well the periodic execution has to stop. So, it returns a value that we can pass to Window.clearInterval( ) which then can be used to cancel the periodic execution of the supplied code or function.

setInterval() method Examples

This example prints yogeshchauhan.com every 3 seconds:

Let’s modify the example above to print the time as well. It will add the time to the string yogeshchauhan.com every 3 seconds.

How to stop setInterval() execution?

As we saw earlier, we can use clearInterval() to stop the execution.

Let’s use the same example to stop the execution.

We must use a variable when creating the interval method to stop the execution using the clearInterval() method.

Let’s create a variable in the same example above and add a stop button to stop the execution.

I used setInterval() and clearInterval() to create a progress bar in this post.

How to pass parameters in setInterval()?

Let’s pass few parameters in the example above.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to apply style only to first child and/or only to children other than the first child?CSSHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPWindow setTimeout() Method in JavaScriptJavaScriptIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSDROP DATABASE (remove a database) from PostgresPostgres