|
With JavaScript, it is possible to execute some code NOT instantly 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 particular time interval. This is called timing events. It's very easy to time events in JavaScript. The two key methods that are used are: 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 distinction 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>
|
