|
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.
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>
|
|
