JavaScript Timing Events
With JavaScript, it is possible to execute some code NOT
immediately after a function is called, but after a specified time interval.
This is called timing events.
Examples
Simple timing
Another simple timing
Timing event in an infinite loop
Timing event in an infinite loop - with a Stop button
A clock created with a timing event
JavaScript Timing Events
With JavaScript, it is possible to execute some code NOT immediately after a
function is called, but after a specified time interval. This is called timing
events.
It's very easy to time events in JavaScript. The two key methods that are used
are:
- setTimeout() - executes a code some time in the future
- clearTimeout() - cancels the setTimeout()
Note: The setTimeout() and clearTimeout() are both methods of the HTML
DOM Window object.
setTimeout()
Syntax
var t=setTimeout("javascript statement",milliseconds)
|
The setTimeout() method returns a value - In the statement above, the value
is stored in a variable called t. If you want to cancel this setTimeout(), you
can refer to it using the variable name.
The first parameter of setTimeout() is a string that contains a JavaScript
statement. This statement could be a statement like "alert('5 seconds!')" or a
call to a function, like "alertMsg()".
The second parameter indicates how many milliseconds from now you want to
execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
</body>
</html>
|
Example - Infinite Loop
To get a timer to work in an infinite loop, we must write a function that
calls itself. In the example below, when the button is clicked, the input field
will start to count (for ever), starting at 0:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
|
clearTimeout()
Syntax
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as the "Infinite Loop" example above. The only
difference is that we have now added a "Stop Count!" button that stops the
timer:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>
|
Learn XML with Stylus Studio XML Tools - Free Download!
 |
|
Stylus Studio makes it easy to edit and validate XML, XSLT, DTD, XML Schema, XHTML, XPath, XQuery and Web Service applications.
Free XML video demonstrations will help you learn XML and become a W3C XML development master in just minutes!
Download a FREE Trial Now!
|
| 
HOME
Printer friendly page
