User Id :    Password :      New Member   Forgot Password  
 
JavaScipt Timing Events
Description It is possible to execute some code after a specified time-interval. This is called timing events.   No. of Views     1344
  Rating     4
Author Najmul Hoda   Posted On     01 Feb 2010
Tags Java Script    

Sample Code   Download Code

Introduction
Before explaining the article, I would like to thank all readers who read my article and voted for it. Your appreciation for my article gives me strength to write more good articles. Hope in future I will get your valuable comments and suggestions. Now I won't waste your time and come back to the topic. I have written this article on ‘JavaScript Timing Events’. By using JavaScript, it is possible to execute some code after a specified time-interval.
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.

1. setTimeout () Method
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.
Example
<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>
2. 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 a button is clicked, the input field will start to count (for ever), starting at 0.
Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:
 Example
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>
<body>
<form><input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>
3. The clearTimeout() Method
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:
Example
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

About Author

About Author He is a team lead, having 8+ years of experience. He loves writing technical article for .Net developers. Najmul Hoda
No Photo
 
Country United States
Company BirlaSoft
Home Page http://www.magixchat.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

 
 
Posted By Rajeev on 26 Feb 2010 at 05:25 AM
 
Congrats buddy.
 
 
   
Write your comment here.
Comment
Verification Code