When an HTML page makes an asynchronous request, the request will return immediately and the JavaScript will not know whether the request worked. Right after making the call, the JavaScript has to assume that the HTTP request worked. The feedback from the server to the JavaScript is a callback. Between the call and callback, 1 second, 10 seconds, or 3 minutes could transpire. If 3 minutes pass, the user will become impatient as nothing will be happening on the HTML page. If there is no feedback whatsoever, people get nervous and think something went wrong and will press the button again. This is why it is important to provide some form of feedback.
To provide feedback, a timer is used. The timer periodically checks the state of the HTTP request by querying the readyState property. While the user is waiting, a turning hour clock is generated or progress bar incremented. How you provide the feedback is up to you, but to provide feedback you will need a timer.
One-Shot Timers
A one-shot timer in JavaScript counts down a period of time and then executes some JavaScript. There is no repetition when using a one-shot timer. A one-shot timer is implemented by using the following HTML code:
<html> <head>
<title>Sample Page</title>
<script language="JavaScript" type="text/javascript"> var counter = 0; function StartIt() { document.getElementById('result').innerHTML = "(" + counter + ")"; counter ++; if( counter <= 10) { window.setTimeout("StartIt()", 1000); } } </script> </head> <body>
<button onclick="StartIt()">One Shot Counter</button> <p><table border="1">
<tr><td>Counter</td><td><span id="result">No Result</span></td></tr> </table></p>
</body> </html>
In the example HTML code, there is a button that when pressed calls the function StartIt. The function StartIt generates output in the HTML code of the variable counter. The variable
counter is a counter that is incremented. To start the timer, the method window.setTimeout
needs to be called. The method setTimeout starts a one-time timer that executes the JavaScript represented by the first parameter. The second parameter represents the number of milliseconds that should pass before the JavaScript is executed. It is important to realize that the JavaScript executed is a text-based script and should not reference variables that are not in scope.
To generate a repeating timer, the JavaScript calls the function StartIt. Then for each time-out (1 second), the timer countdown is started again. The timer is not started after the counter has reached a value of 10.
Periodic Timers
The other type of timer is a periodic timer that executes every n milliseconds. Using a periodic timer in JavaScript is similar to using a one-shot timer except the method call is different. Following is the HTML code used to run a periodic timer:
<html> <head>
<title>Sample Page</title>
<script language="JavaScript" type="text/javascript"> var intervalId; var counter2 = 0; function NeverEnding(input) { document.getElementById('result').innerHTML = "(" + input + ")(" + counter2 + ")"; counter2 ++; if( counter2 > 10) { window.clearInterval(intervalId); } } function StartItNonEnding() { intervalId = window.setInterval(NeverEnding, 1000, 10); } </script> </head> <body>
<button onclick="StartItNonEnding()">Get a document</button> <p><table border="1">
<tr><td>Counter</td><td><span id="result">No Result</span></td></tr> </table></p>
</body> </html>
In this example, the button calls the function StartItNonEnding. In the function
StartItNonEnding, there is a single method call, window.setInterval. The method setInterval
has multiple variations, and a valid variation is like setTimeout illustrated previously. The variation illustrated in the HTML code uses three parameters, even though only two are necessary. The first parameter is a reference to a function that is called for each periodic event. The second parameter is the length of the period. And the third parameter is an argument that is passed to the function NeverEnding. The third parameter does not work in Internet Explorer, but works on other browsers such as Firefox and Safari.
As in the one-shot timer, the timer output is inserted into the HTML document. The counter is incremented for each call to the function NeverEnding. What is different is that NeverEnding has a parameter that can be used to uniquely identify an instance of the timer. To stop a periodic timer, the method clearInterval is used. The parameter for clearInterval is the value of the instantiated timer that is returned when calling the method setInterval.
After running the HTML code, the generated output is similar to Figure 2-11. The value 10 in the lower-right corner of the HTML table is the value passed to the function NeverEnding. The 0 value is the counter.
Figure 2-11. Generated HTML document