Timing Events in JavaScript : JavaScript Timers
With JavaScript, it is possible to execute some code after a specified time interval.
This is called timing events.
So it is like: if you want to execute a code 2 minutes later from the page load , you can do that with a simple trick and here the trick is given to us by “God of Client Side Programming” JavaScript.
JavaScript 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>
|
Taken from W3SCHOOLS Site : http://www.w3schools.com/js/js_timing.asp
This small article helps me great , so I think somebody will find it useful.
