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()
The setTimeout() Method
Syntax
var t=setTimeout("javascript statement",milliseconds);
The setTimeout() method returns a value. In the syntax defined above, the
value is stored in a variable called t. If you want to cancel the setTimeout()
function, you can refer to it using the variable name.The first parameter of setTimeout() can be a string of executable code, or a call to a function.
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 timeMsg()
{
var t=setTimeout("alertMsg()",5000);
}
function alertMsg()
{
alert("Hello World");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 5 seconds"
onclick="timeMsg()" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",5000);
}
function alertMsg()
{
alert("Hello World");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 5 seconds"
onclick="timeMsg()" />
</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 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>
<p>Click on the button
above. The input field will count forever, starting at 0.</p>
</body>
</html>
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>
<p>
Click on the "Start
count!" button above to start the timer. The input field will count
forever, starting at 0. Click on the "Stop count!" button to stop the
counting. Click on the "Start count!" button to start the timer
again.
</p>
</body>
</html>
Ex-1 : The input field will tell you when two, four, and six seconds have
passed.
<html>
<head>
<script
type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2
seconds!'",2000);
var
t2=setTimeout("document.getElementById('txt').value='4
seconds!'",4000);
var
t3=setTimeout("document.getElementById('txt').value='6
seconds!'",6000);
}
</script>
</head>
<body>
<form>
<input type="button"
value="Display timed text!" onclick="timedText()" />
<input type="text"
id="txt" />
</form>
<p>Click on the button
above. The input field will tell you when two, four, and six seconds have
passed.</p>
</body>
</html>
Ex-2 : Display the time in hours, minutes and seconds.
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
No comments:
Post a Comment