DOM Timing
DOM Windows and Related Objects – Part 11
Forward: In this part of the series, we look at DOM Timing.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Timing
You can have an expression (or function) evaluated after a specified time. You can also have an expression (or function) evaluated at specified intervals. These are two ways of setting a timer in DOM. A timer does not stop automatically. When you no longer need a timer, you must stop it explicitly, for either of the ways. The time is typed in milliseconds, but the units (ms) are not typed. Note: 1000 milliseconds = 1 second.
The setTimeout() Method
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. In simple terms the syntax is:
ID = window.setTimeout("functionCall()", millisec)
The ID is the variable that holds the returned value. The returned value is an identifier that identifies the timer, created by the method, setTimeout(). You can omit the preceding reserved word, window, for the method. Note that the function call, which is the first argument of the setTimeout() method, is in quotes.
The clearTimeout() Method
To stop the timer set by the setTimeout() method, you have to use the clearTimeout() method. The clearTimeout() method clears a timer set by the setTimeout() method. You should explicitly stop the setTimeout timer even though it looks as if it stops on its own. The argument of the clearTimeout() method is the ID returned by the setTimeout() method. The syntax is:
window.clearTimeout(ID);
Read and try the following code; after waiting for 10 seconds, you will see the alert box (just click the OK button).
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
function timeoutfn()
{
alert("Finally, Timeout!");
window.clearTimeout(to);
}
to = window.setTimeout("timeoutfn()", 10000);
</script>
</body>
</html>
There are certain things to note here. Note that you type the milliseconds value, without a comma. So you would type, 10000 and not 10,000. You clear the timer after it has done its work. So, here, the statement to clear the timer is inside the called function and not typed below the setTimeout() method call. If it were typed below the setTimeout() method statement, it would stop the timer before the timer ever did its work. The setTimeout() method returns its ID before it does its work.
The setInterval() method calls a function or evaluates an expression at specified intervals of milliseconds. It starts operating after the first interval has elapsed. In simple terms the syntax is:
ID = window.setInterval("functionCall()", millisec)
The ID is the variable that holds the returned value. The returned value is an identifier that identifies the timer, created by the method, setInterval(). You can omit the preceding reserved word, window, for the method. Note that the function call, which is the first argument of the setInterval() method, is in quotes.
The clearInterval() Method
To stop the timer set by the setInterval() method, you have to use the clearInterval() method. The clearInterval() method clears a timer set by the setInterval() method. You should explicitly stop the clearInterval timer. The argument of the clearInterval() method is the ID returned by the setInterval() method. The setInterval() method will continue making the function call until clearInterval() is called, or the window is closed. The syntax is:
window.clearInterval(ID);
In the following code, the setInterval timer is set and it displays an alert box every 3 seconds. There is a counter that counts the number of alert boxes (intervals) that have been displayed. After 3 intervals (times), the timer is stopped (cleared). Read and try the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
counter = 0;
function timeintfn()
{
alert('interval');
counter+=1;
if (counter==3)
{
window.clearInterval(ti);
}
}
ti = window.setInterval("timeintfn()", 3000);
</script>
</body>
</html>
There are certain things to note here. Note that you type the milliseconds value without a comma. So you would type, 3000 and not 3,000. You clear the timer after it has done its work. So, here, the statement to clear the timer is inside the called function in an if-statement and not typed below the setInterval() method call. If it were typed below the setInterval() method call, it would stop the timer before the timer ever did its work; any code works by executing statements moving downward in the code. The setInterval() method returns its ID before it does its work. After the ID is returned, it can be used anywhere in the code, so long as it is needed after the return.
Note: you can omit the reserved word, window, in any of the above four methods.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT