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>
|
 |
 |
 |
 |
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
 |
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
 |
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Utilize the extensive out-of-the box features or customize your site through Ektron CMS400.NET's open architecture |
 |
Promote collaboration in your organization through project workspaces where others can efficiently find information and work together |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
|
|
 |
TAKE THE VIDEO TOUR |
 |
or download a FREE TRIAL today. |
| 
HOME
Printer friendly page
