JavaScript's Window object comes with four methods that you can use to create timed or looping events in your Web pages. In this article, I'll introduce you to them, and also show you a few examples of how they can be used in different situations.
Using a setInterval() function is identical to using a setTimeout() function in a loop. To illustrate this, consider the following example by rewriting the countdown clock example from a few pages back.
<html> <head> <script language="JavaScript"> var i=10; function countDown() { if(i > 0) { document.forms[0].elements[0].value=i; i = i-1; } else { alert("Happy New Year!"); } } window.setInterval("countDown()", 1000); </script> </head> <body> <form> <input type="text" name="counter" size="3"> </form> </body> </html>
In this case, I've used the setInterval() method instead of the setTimeout() method to call the countDown() function over and over again. Note the difference between the version above and the one a few pages back - above, the call to setInterval() is outside the loop, whereas earlier, the call to setTimeout() was inside the loop.
Here's one more example, this one making a <div> appear when the mouse moves over a link and automatically hiding it again after 3 seconds:
<html> <head> <script language="JavaScript"> function on() { if(document.all) { // make <div> visible document.all['volume'].style.visibility='visible'; // after 3 seconds, make it invisible window.setInterval("document.all['volume'].style.visibility='hidden'",3000); }
if(document.layers) { // make <div> visible document.volume.visibility='show'; // after 3 seconds, make it invisible window.setInterval("document.volume.visibility='hide'",3000); } if(!document.all && document.getElementById) { // make <div> visible document.getElementById("volume").style.visibility="visible"; // after 3 seconds, make it invisible window.setInterval("document.getElementById('volume').style.visibility='hidd en'",3000); } } </script> </head> <body> <a href="#" onMouseOver="javascript:on();">Show Volume Control</a> <div id="volume" style="color:white; font-face:Arial; background:black; position:absolute; left:550; top:200; height:150; visibility:hidden;"> Volume<br> control<br> slider<br> here </div> </body> </html>
JavaScript 
/ 113 
