JavaScript Timing Events
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.
Iana Tsolova
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required