JavaScriptprovides different function for the user experience. SetInterval() is a function used to specify the interval between given actions and fire these actions after specified intervals. In this tutorial, we will learn how to create intervals or delays for specified actions, functions and clear them.

SetInterval() Syntax

We will first start by learning the SetInterval() function syntax.

setInterval(CODE/FUNCTION,INTERVAL,PARAM1,...);

`CODE/FUNCTION` is the code, action or function we want to fire after the specified delay
`INTERVAL` is the delay or interval time we want to wait to fire code. DELAY value is specified in milliseconds which means to wait 3 seconds we should provide 3000 to the setInterval() function.
`PARAM1` is optional where it can be used to send parameter to the CODE/FUNCTION

SetInterval() Return Value

After using the setInterval() function it will return a numeric value. This numeric value is the create interval instance ID which can be expressed as intervalID. IntervalID can be used to change settings like clearing the interval.

Timing with SetInterval() Function

SetInterval() function is provided by the Window and Worker objects. We will start with a simple example. We will run the function named ChangeColor() in every 10 seconds which will print some text to the web browser console. We will use 10000 milliseconds to represent 10 seconds.

<html>
<body>

<p>This Page Will Generate RandomNumbers with 10 seconds Interval</p>

<p id="demo"></p>

<script>

var myVar = setInterval(RandomNumber ,10000);

function RandomNumber() {

  document.getElementById("demo").innerHTML+="<br>"+Math.random();
}
</script>

</body>
</html>

Stop Execution or Timer with clearInterval() Function

When the timer starts with SetInterval() function it will run forever unless we do not stop explicitly. We can stop the time with the clearInterval() function. In a web page, there may be more than one intervals set. So we have to provide the interval we want to stop or cancel by providing its IntervalID. In this example we will create a button which will call the clearInterval() function by providing the MyIntervalID like below.

<html>
<body>

<p>This Page Will Generate RandomNumbers with 10 seconds Interval</p>

<button onclick="clearInterval(MyIntervalID)">Stop time</button>

<p id="demo"></p>

<script>

var MyIntervalID = setInterval(RandomNumber ,10000);

function RandomNumber() {

  document.getElementById("demo").innerHTML+="<br>"+Math.random();
}
</script>

</body>
</html>

Stop Execution or Timer with clearInterval() Function

Pass Parameters To The Function

We can pass parameters to the delayed function. In this example, we will provide the name parameter to the interval function named PrintMyName().

<html>
<body>

<p>This Page Will Print Name As Parameter To The Delayed Function</p>

<p id="demo"></p>

<script>

setInterval(PrintMyName ,1000, "poftut.com");

function PrintMyName(myname) {

  document.getElementById("demo").innerHTML+="<br>"+myname;
}
</script>

</body>
</html>

SetInterval() vs SetTimeout()

JavaScript also provides the setTimeout() function in order to set delays between the execution of the given function or code. So which one should we use and what is the little difference between setInterval() and setTimeout() function. setInterval() function will run like a scheduled job every given interval without any latency but setTimeout() function is a bit different where function, code runs and then the given delay set again. If the function execution is 5 seconds and delays it 10 seconds the next start will take 15 seconds in total with the setTimeout() function.

JavaScript SetInterval() Function Tutorial with Examples