JavaScript Timing Events
1
2
3
4
5
6
7
8
9
10
11
12
|
|
|
JavaScript can be executed in time-intervals.
This is called timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to execute some code 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()
Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.
The 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> |
Try it yourself »
|
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> |
Try it yourself »
|
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> |
Try it yourself »
|
 |
More Examples |
Another simple timing
A clock created with a timing event
Make your web applications look like a million bucks
|
|
Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.
FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc.
and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise
whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our
12,000 customers and 150,000 users which include a majority of the Fortune 500 companies.
And yeah, your applications could look like a million bucks by spending just $69.
So go ahead, download your
copy of FusionCharts and start "wow-ing" your customers now!
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
