Home arrow JavaScript arrow Page 3 - Using Timers in JavaScript

New Year Blues - JavaScript

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.

TABLE OF CONTENTS:
  1. Using Timers in JavaScript
  2. Window Washer
  3. New Year Blues
  4. A Decent Interval
  5. Turning Up the Volume
  6. Sliding Around
  7. A Long Wait
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 113
January 28, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Here's another example, this one containing two timers. The first one is set to close the window after 30 seconds. However, 10 seconds in, the second one will activate and ask the user to confirm the timeout. If the user does not confirm it, the timeout will be cancelled.


<script language="JavaScript">
// set timeout for window to close
var win = setTimeout('window.close()', 30000);
// set timeout for user input
var check = setTimeout('checkStatus()', 10000);
// ask if user wants window to close
// if no, clear timeout for window to close
function checkStatus()
{
 if(!window.confirm("This window will shut in 20 seconds. Is that OK?"))
 { 
  window.clearTimeout(win);
 }
}
</script>

Note that after the confirm() dialog bog is displayed and while it is waiting for a user click, all timers are suspended.

Here's another example, this one using the setTimeout() method to create a countdown clock. Take a look:


<html>
<head>
<script language="JavaScript">
var i
=10;
function 
countDown() 
{
 
if(0)
 
{
  document
.forms[0].elements[0].value=i;
  i 
i-1;
  
var window.setTimeout("countDown()"1000);
 
}
 
else 
 
{
  alert
("Happy New Year!");
 
}
}
</script>

</head>
<body onLoad="countDown()">
<form>
<input type="text" name="counter" size="3">
</form>
</body>
</html>

In this case, I'm using the setTimeout() method to call itself in a loop every second, and updating the value of the countdown clock on every iteration of the loop. When the countdown hits 0, an alert box is displayed.



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: