window.setInterval

  • Revision slug: DOM/window.setInterval
  • Revision title: window.setInterval
  • Revision id: 25901
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[ja:DOM:window.setInterval]]

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) 
  • ID is a unique interval ID you can pass to clearInterval.
  • funcName is the function you want to be called repeatedly.
  • delay is the number of milliseconds (thousandths of a second) that the setInterval() function should wait between each call to funcName.

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 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.

See notes at the talk page and setTimeout reference.

Specification

{{template.DOM0()}}

{{ wiki.languages( { "fr": "fr/DOM/window.setInterval", "ja": "ja/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>
<ul><li><code>ID</code> is a unique interval ID you can pass to <a href="en/DOM/window.clearInterval">clearInterval</a>.
</li><li><code>funcName</code> is the function you want to be called repeatedly.
</li><li><code>delay</code> is the number of milliseconds (thousandths of a second) that the <code>setInterval()</code> function should wait between each call to <code>funcName</code>.
</li></ul>
<h3 name="Example"> Example </h3>
<pre class="eval">var intervalID = window.setInterval(animate, 500);
</pre>
<p>The following example will continue to call the <code>flashtext()</code> function once a second, until 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;
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);
}
&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><p>See notes at the <a href="Talk:en/DOM/window.setInterval">talk page</a> and <a href="en/DOM/window.setTimeout">setTimeout</a> reference.
</p>
<h3 name="Specification"> Specification </h3>
<p>{{template.DOM0()}}
</p>{{ wiki.languages( { "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}
Revert to this revision