window.setInterval

  • Revision slug: DOM/window.setInterval
  • Revision title: window.setInterval
  • Revision id: 25899
  • Created:
  • Creator: Jabez
  • Is current revision? No
  • Comment /* Example */

Revision Content

{{template.DomRef()}}

Summary

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

Syntax

ID = window.setInterval(funcName, delay) 

Parameters

  • ID is a unique interval ID.
  • funcName is the name of the function which you want to repeatedly call.
  • delay is the number of milliseconds (thousandths of a second) that the setInterval() function should wait between each call to funcName.

Example

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

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

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

<script type="text/javascript">
function changeColor()
{
intervalID = window.setInterval("flashText()", 1000);
}

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

function stopTextColor()
{
window.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 interval ID is used to refer to the specific interval when it needs to be cleared. The window.setInterval function is commonly used to set a delay for functions that are executed again and again, such as animations. See also window.clearInterval.

Specification

DOM Level 0. Not part of specification.

{{ wiki.languages( { "fr": "fr/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary">Summary</h3>
<p>Calls a function repeatedly, with a fixed time delay between each call to that function.
</p>
<h3 name="Syntax">Syntax </h3>
<pre class="eval"><i>ID</i> = window.setInterval(<i>funcName</i>, <i>delay</i>) 
</pre>
<h3 name="Parameters">Parameters </h3>
<ul><li><code>ID</code> is a unique interval ID.
</li><li><code>funcName</code> is the name of the function which you want to repeatedly call. 
</li><li><code>delay</code> is the number of milliseconds (thousandths of a second) that the setInterval() function should wait between each call to <code>funcName</code>.
</li></ul>
<h3 name="Example">Example </h3>
<pre class="eval">intervalID = window.setInterval("animate()", 500);
</pre>
<p>The following example will continue to call the flashtext() function once a second, untill you clear the <code>intervalID</code> by clicking the Stop button.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;setInterval/clearInterval example&lt;/title&gt;

&lt;script type="text/javascript"&gt;
function changeColor()
{
intervalID = window.setInterval("flashText()", 1000);
}

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

function stopTextColor()
{
window.clearInterval(intervalID);
}
&lt;/script&gt;
&lt;/head&gt;

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



</pre>
<h3 name="Notes">Notes </h3>
<p>The <i>interval ID</i> is used to refer to the specific interval when it needs to be cleared. The <a href="en/Window.setInterval">window.setInterval</a> function is commonly used to set a delay for functions that are executed again and again, such as animations. 
See also <a href="en/Window.clearInterval">window.clearInterval</a>. 
</p>
<h3 name="Specification">Specification </h3>
<p>DOM Level 0. Not part of specification.
</p>{{ wiki.languages( { "fr": "fr/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}
Revert to this revision