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 Altova MissionKit is a suite of intelligent XML tools, including:
XMLSpy® – industry-leading XML editor
- Support for all XML-based technologies
- Graphical editing views, powerful debuggers, code generation, & more
MapForce® – graphical data mapping tool
- Drag-and-drop data conversion with code generation
- Support for XML, DBs, EDI, Excel® 2007, text, Web services
StyleVision® – visual stylesheet designer
- Drag-and-drop stylesheet design for XML & databases
- Output to HTML, PDF, RTF, Word 2007, & more
And more…
Try before you buy with a free fully functional 30-day trial
Download today
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
|
HOME
Printer friendly page
