重复调用一个函数或执行一个代码段,以固定的时间延迟在每次调用之间。返回一个 intervalID。
语法
var intervalID = window.setInterval(func, delay[, param1, param2, ...]); var intervalID = window.setInterval(code, delay);
参数
intervalID
是此重复操作的唯一辨识符,可以作为参数传给clearInterval
()
。func
是你想要重复调用的函数。code
是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的,不推荐的原因和eval()一样)。delay
是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。
需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段).
示例
例1:基本用法
var intervalID = window.setInterval(animate, 500);
例2:两种颜色的切换
下面的例子里会每隔一秒就调用函数flashtext()
一次,直至你通过按下Stop按钮来清除本次重复操作的唯一辨识符intervalID。
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>setInterval/clearInterval example</title> <script type="text/javascript"> var nIntervId; function changeColor() { nIntervId = setInterval(flashText, 500); } function flashText() { var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "red" ? "blue" : "red"; } function stopTextColor() { clearInterval(nIntervId); } </script> </head> <body onload="changeColor();"> <div id="my_box"> <p>Hello World</p> </div> <button onclick="stopTextColor();">Stop</button> </body> </html>
例3:打字机的效果
下面这个例子通过键入、删除和再次键入所有NodeList
中的符合的特定selector的字符,以达到打字机的效果。
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>JavaScript Typewriter - MDN Example</title> <script type="text/javascript"> function Typewriter (sSelector, nRate) { function clean () { clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; } function scroll (oSheet, nPos, bEraseAndStop) { if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap[nPos] < oSheet.parts.length) { oRel = oSheet.parts[aMap[nPos]]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts[nChild]); this.parts[nChild] = new Sheet(this.parts[nChild]); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = [], aMap = []; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems[nItem])); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems[nItem].style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; </script> <style type="text/css"> span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p> <p id="controls" style="text-align: center;">[ <span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span> ]</p> <div id="info"> Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. </div> <h1>JavaScript Typewriter</h1> <div id="article"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <form name="myForm"> <p>Phasellus ac nisl lorem: <input type="text" name="email" /><br /> <textarea name="comment" style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p> <p><input type="submit" value="Send" /> </form> <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p> <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> </div> </body> </html>
查看示例效果,亦可参考:clearInterval()
。
回调参数
如果你想通过你的函数传递回一个参数,而且还要兼容IE,由于IE不支持传递额外的参数 (setTimeout()
或者 setInterval()
都不可以) ,你可以引入下面的兼容代码。该代码能让IE也支持符合HTML5标准的定时器函数。
/*\ |*| |*| IE-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (HTML5 standard syntax). |*| |*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval |*| |*| Syntax: |*| var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); |*| var timeoutID = window.setTimeout(code, delay); |*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); |*| var intervalID = window.setInterval(code, delay); |*| \*/ if (document.all && !window.setTimeout.isPolyfill) { var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setTimeout.isPolyfill = true; } if (document.all && !window.setInterval.isPolyfill) { var __nativeSI__ = window.setInterval; window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setInterval.isPolyfill = true; }
Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
Yet another possibility is to use function's bind. Example:
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
Inactive tabs
Requires Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)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.
Explanation
Code executed by setInterval()
is run in a separate execution context to the function from which it was called. As a consequence, the this
keyword for the called function will be set to the window
(or global
) object, it will not be the same as the this
value for the function that called setTimeout
. See the following example (which for praticity uses setTimeout()
instead of setInterval()
– the problem in fact is the same for 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); // prints "[object Window]" after 1 second setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds // let's try to pass the 'this' object setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
As you can see there are no ways to pass the this
object to the callback function.
A possible solution
A possible way to solve the "this
" problem is to replace the two native setTimeout()
or setInterval()
global functions with two non-native ones which will enable their invocation through the Function.prototype.call
method. The following example shows a possible replacement:
// Enable the passage of the 'this' object through the JavaScript timers var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(oThis, aArgs); } : vCallback, nDelay); }; window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () { vCallback.apply(oThis, aArgs); } : vCallback, nDelay); };
New feature test:
myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but... setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
Another, more complex, solution for the this
problem is the following little framework.
Function.prototype.bind()
method, which lets you specify the value that should be used as this
for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.A little framework
Sometimes a page uses dozens and dozens of animations. In such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the clearTimeout()
function. A possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them.
Here is a possible and minimalist example of such abstraction, which for this reason we named MiniDaemon
.
Daemon
) see JavaScript Daemons Management. This more complex version is nothing but a big and scalable collection of methods for the Daemon
constructor. But the Daemon
constructor itself is nothing but a clone of MiniDaemon
with an added support for init and onstart functions declarable during the instantiation of the daemon
. So the MiniDaemon
framework will remain the recommended way for simple animations, because Daemon
without its collection of methods is essentially a clone of it.The architecture of this constructor explicitly avoids the use of closures. It also offers an alternative way to pass the this
object to the callback function (see The "this
" problem for details).
/*\ |*| |*| MiniDaemon - Mozilla Developer Network - ver. 1.0 rev. 1 |*| |*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval |*| \*/ function MiniDaemon (oOwner, fTask, nRate, nLen) { if (!(this && this instanceof MiniDaemon)) { return; } if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); } if (oOwner) { this.owner = oOwner; } this.task = fTask; if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); } if (nLen > 0) { this.length = Math.floor(nLen); } } MiniDaemon.prototype.owner = null; MiniDaemon.prototype.task = null; MiniDaemon.prototype.rate = 100; MiniDaemon.prototype.length = Infinity; /* These properties should be read-only */ MiniDaemon.prototype.SESSION = -1; MiniDaemon.prototype.INDEX = 0; MiniDaemon.prototype.PAUSED = true; MiniDaemon.prototype.BACKW = true; /* Global methods */ MiniDaemon.forceCall = function (oDmn) { oDmn.INDEX += oDmn.BACKW ? -1 : 1; if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; } return true; }; /* Instances methods */ MiniDaemon.prototype.isAtEnd = function () { return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length; }; MiniDaemon.prototype.synchronize = function () { if (this.PAUSED) { return; } clearInterval(this.SESSION); this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); }; MiniDaemon.prototype.pause = function () { clearInterval(this.SESSION); this.PAUSED = true; }; MiniDaemon.prototype.start = function (bReverse) { var bBackw = Boolean(bReverse); if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; } this.BACKW = bBackw; this.PAUSED = false; this.synchronize(); };
Syntax
var myDaemon = new MiniDaemon(thisObject, callback[
, rate
[, length]]);
Description
Returns a JavaScript Object
containing all informations needed by an animation (like the this
object, the callback function, the length, the frame-rate).
Parameters
thisObject
- The
this
object on which will be called the callback function. It can be anobject
ornull
. callback
- The function which will be invoked repeatedly. It will be called with three parameters: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or
Infinity
) and backwards (a boolean expressing whether the index is increasing or decreasing). It will be something like callback.call(thisObject, index, length, backwards). If the callback function returns afalse
value the daemon will be paused. rate (optional)
- The time lapse (in number of milliseconds) between each invocation. The default value is 100.
length (optional)
- The total number of invocations. It can be a positive integer or
Infinity
. The default value isInfinity
.
MiniDaemon
instances properties
myDaemon.owner
- The
this
object on which is executed the daemon (read/write). It can be anobject
ornull
. myDaemon.task
- The function which will be repeatedly invoked (read/write). It will be called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or
Infinity
) and backwards (a boolean expressing whether the index is decreasing or not) – see above. If themyDaemon.task
function returns afalse
value the daemon will be paused. myDaemon.rate
- The time lapse (in number of milliseconds) between each invocation (read/write).
myDaemon.length
- The total number of invocations. It can be a positive integer or
Infinity
(read/write).
MiniDaemon instances methods
myDaemon.isAtEnd()
- Returns a boolean expressing whether the daemon is at the start/end position or not.
myDaemon.synchronize()
- Synchronize the timer of a started daemon with the time of its invocation.
myDaemon.pause()
- Pauses the daemon.
myDaemon.start([reverse])
- Starts the daemon forward (index of each invocation increasing) or backwards (index decreasing).
MiniDaemon global object methods
MiniDaemon.forceCall(minidaemon)
- Forces a single callback to the
minidaemon.task
function regardless of the fact that the end has been reached or not. In any case the internalINDEX
property will be increased/decreased (depending on the actual direction of the process).
Example usage:
your HTML page:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>MiniDaemin Example - MDN</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/css"> #sample_div { visibility: hidden; } </style> </head> <body> <p><input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /> <input type="button" onclick="fadeInOut.start(true);" value="fade out"> <input type="button" onclick="fadeInOut.pause();" value="pause" /></p> <div id="sample_div">Some text here</div> <script type="text/javascript"> function opacity (nIndex, nLength, bBackwards) { this.style.opacity = nIndex / nLength; if (bBackwards ? nIndex === 0 : nIndex === 1) { this.style.visibility = bBackwards ? "hidden" : "visible"; } } var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8); </script> </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()
.
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 1.0 |
Supports parameters for callback*1 | (Yes) | (Yes) | 10.0 | (Yes) | ? |
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 |
Supports parameters for callback*1 | ? | ? | ? | ? | ? | ? |
*1 Whether it supports the optional parameters when in its first form or not.
Specification
DOM Level 0 不属于任何标准.