ThesetInterval() method of theWindow interface repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

Syntax

setInterval(code)setInterval(code, delay)setInterval(func)setInterval(func, delay)setInterval(func, delay, arg1)setInterval(func, delay, arg1, arg2)setInterval(func, delay, arg1, arg2, /* …, */ argN)

Parameters

func

Afunction to be executed everydelay milliseconds.The first execution happens afterdelay milliseconds.

code

ATrustedScript or a string of arbitrary code that is compiled and executed everydelay milliseconds.This can be used instead of passing a function, but isstrongly discouraged for the same reasons that make usingeval() a security risk.

delayOptional

The delay time between executions of the specified function or code, in milliseconds.Defaults to 0 if not specified.SeeDelay restrictions below for details on the permitted range ofdelay values.

arg1, …,argNOptional

Additional arguments which are passed through to the function specified byfunc once the timer expires.

Return value

A positive integer (typically within the range of 1 to 2,147,483,647) that uniquely identifies the interval timer created by the call.

This identifier, often referred to as an "interval ID", can be passed toclearInterval() to stop the repeated execution of the specified function.

Exceptions

SyntaxError

Thecode can't be parsed as a script.

TypeError

Thrown if thecode parameter is set to a string whenTrusted Types areenforced by a CSP and no default policy is defined.It is also thrown if the first parameter is not one of the supported types: a function, string orTrustedScript.

Description

ThesetInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations.You can cancel the interval usingclearInterval().

If you wish to have your function calledonce after the specified delay, usesetTimeout().

Delay restrictions

It's possible for intervals to be nested; that is, the callback forsetInterval() can in turn callsetInterval() to start another interval running, even though the first one is still going.To mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval.Attempts to specify a value less than 4 ms in deeply-nested calls tosetInterval() will be pinned to 4 ms.

Browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common.Note also that the actual amount of time that elapses between calls to the callback may be longer than the givendelay; seeReasons for delays longer than specified for examples.

Interval IDs are shared withsetTimeout()

The method returns an identifier that uniquely identifies the interval timer created by the call.This identifier, which is often referred to as an "interval ID", can be passed toclearInterval() to stop the repeated execution of the specified function.

Within the same global environment (e.g., a particular window or worker), the interval ID is ensured to remain unique and is not reused for any new interval timer as long as the original timer is still active.However, different global environments maintain their own independent pools of interval IDs.

Be aware thatsetInterval() andsetTimeout() share the same pool of IDs, and thatclearInterval() andclearTimeout() can technically be used interchangeably.For clarity, however, you should try to always match them to avoid confusion when maintaining your code.

Ensure that execution duration is shorter than interval frequency

If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function usingsetTimeout().For example, if usingsetInterval() to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time.As such, you may find yourself with queued up XHR requests that won't necessarily return in order.

In these cases, a recursivesetTimeout() pattern is preferred:

(function loop() {  setTimeout(() => {    // Your logic here    loop();  }, delay);})();

In the above snippet, a named functionloop() is declared and is immediately executed.loop() is recursively called insidesetTimeout() after the logic has completed executing.While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.

Functions are called with the globalthis

Methods or functions passed tosetInterval() do not run in the same execution context assetInterval(), and hence do not have the samethis as the function that calledsetInterval().Instead the called function has athis keyword set to thewindow (orglobal) object.This problem is explained in detail in theJavaScript reference.

The following example demonstrates how this can cause unexpected behavior (usingsetTimeout() instead ofsetInterval(), but the problem applies to both timers):

myArray = ["zero", "one", "two"];myArray.myMethod = function (sProperty) {  alert(arguments.length > 0 ? this[sProperty] : this);};myArray.myMethod(); // prints "zero,one,two"myArray.myMethod(1); // prints "one"setTimeout(myArray.myMethod, 1000); // Alerts "[object Window]" after 1 secondsetTimeout(myArray.myMethod, 1500, "1"); // Alerts "undefined" after 1.5 seconds

You can usearrow functions to adopt thethis of the function in whichsetTimeout() is called (arrow functions have a lexicalthis).

You can test this with the following code.

setTimeout(() => myArray.myMethod(), 1000); // Alert "zero,one,two" after 1 secondsetTimeout(() => myArray.myMethod(1), 1500); // Alert "one" after 1.5 secondssetTimeout(() => myArray.myMethod(2), 3000); // Alert "one" after 3 seconds

You might also use theFunction.prototype.bind() method, which lets you specify the value that should be used asthis for all calls to a given function.That lets you bypass problems where it's unclear whatthis will be, depending on the context from which your function was called.

Security considerations

The method can be used to execute arbitrary input passed in thecode parameter.If the input is a potentially unsafe string provided by a user, this is a possible vector forCross-site-scripting (XSS) attacks.For example, the following example assumes thescriptElement is an executable<script> element, and thatuntrustedCode was provided by a user:

const untrustedCode = "alert('Potentially evil code!');";const id = setInterval(untrustedCode, 1000);

Websites with aContent Security Policy (CSP) will prevent such code running by default; if you need to use the method withcode then you will first need to allow theunsafe-eval in your CSPscript-src.

If you must allow the scripts to run you can mitigate these issues by always assigningTrustedScript objects instead of strings, andenforcing trusted types using therequire-trusted-types-for CSP directive.This ensures that the input is passed through a transformation function.

The behavior of the transformation function will depend on the specific use case that requires a user provided script.If possible you should lock the allowed scripts to exactly the code that you trust to run.If that is not possible, you might allow or block the use of certain functions within the provided string.

Examples

Example 1: Basic syntax

The following example demonstratessetInterval()'s basic syntax.

const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");function myCallback(a, b) {  // Your code here  // Parameters are purely optional.  console.log(a);  console.log(b);}

Example 2: Alternating two colors

The following example calls theflashtext() function once a second untilthe Stop button is pressed.

HTML

<div>  <h3>Hello World</h3></div><button>Start</button><button>Stop</button>

CSS

.go {  color: green;}.stop {  color: red;}

JavaScript

// variable to store our intervalIDlet intervalId;function changeColor() {  // check if an interval has already been set up  intervalId ??= setInterval(flashText, 1000);}function flashText() {  const oElem = document.getElementById("my_box");  oElem.className = oElem.className === "go" ? "stop" : "go";}function stopTextColor() {  clearInterval(intervalId);  // release our intervalId from the variable  intervalId = null;}document.getElementById("start").addEventListener("click", changeColor);document.getElementById("stop").addEventListener("click", stopTextColor);

Result

Specifications

Browser compatibility

See also

• Polyfill ofsetInterval which allows passing arguments to the callback incore-js
• Window.clearInterval()
• WorkerGlobalScope.setInterval()
• Window.setTimeout()
• Window.requestAnimationFrame()