window.setInterval

« Gecko DOM Reference

Summary

Calls a function repeatedly, with a fixed time delay between each call to that function.

Syntax

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

where

  • intervalID is a unique interval ID you can pass to clearInterval().
  • func is the function you want to be called repeatedly.
  • code in the alternate syntax, is a string of code you want to be executed repeatedly. (Using this syntax is not recommended for the same reasons as using eval())
  • delay is the number of milliseconds (thousandths of a second) that the setInterval() function should wait before each call to func. As with setTimeout, there is a minimum delay enforced.

Note that passing additional parameters to the function in the first syntax does not work in Internet Explorer.

Note: Prior to Gecko 13 (Firefox 13.0 / Thunderbird 13.0) , Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer provided.

Example

var intervalID = window.setInterval(animate, 500);

The following example will continue to call the flashtext() function once a second, until you clear the intervalID by clicking the Stop button.

<html>
<head>
<title>setInterval/clearInterval example</title>

<script type="text/javascript">
var intervalID;

function changeColor()
{
  intervalID = setInterval(flashText, 1000);
}

function flashText()
{
  var elem = document.getElementById("my_box");
  if (elem.style.color == 'red')
  {
    elem.style.color = 'blue';
  }
  else
  {
    elem.style.color = 'red';
  }
}

function stopTextColor()
{
  clearInterval(intervalID);
}
</script>
</head>

<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>

Notes

The setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations.

You can cancel the interval using window.clearInterval().

If you wish to have your function called once after the specified delay, use window.setTimeout().

Callback arguments

If you need to pass an argument to your callback function, but need it to work in Internet Explorer, which doesn't support sending additional parameters with setInterval(), use an anonymous function to call your callback.

Example:

var intervalID = setInterval(function() { funcflashText(); }, 1000);

Requires Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

Inactive tabs

Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , intervals are clamped to fire no more often than once per second in inactive tabs.

The 'this' problem

When you pass a method to setInterval() (or any other function, for that matter), it will be invoked with a wrong this value. This problem is explained in detail in the JavaScript reference.

Dangerous usage

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 using window.setTimeout.  For example, if using setInterval 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 alloted time.  As such, you may find yourself with queued up XHR requests that won't necessarily return in order.

For such cases, a recursive setTimeout pattern is preferred:

(function loop(){
   setTimeout(function(){

      // logic here

      // recurse
      loop();

  }, 1000);
})();

In the above snippet, a named function loop is declared and is immediately executed.  loop is recursively called inside setTimeout 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.

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 1.0 (1) 6.0 6.0 1.0

 

Specification

DOM Level 0. Not part of any standard.

Tags (4)

Edit tags

Attachments (0)

 

Attach file