Friday, January 30, 2009
by
ASP.NET AJAX Team
|
This article is taken from W3Schools.
Â
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()
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 (forever), 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; Â |
| Â Â Â Â Â Â Â Â cc=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>Â |
Â
Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.