Sams Teach Yourself JavaScript in 24 Hours

Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

Using Timeouts

Sometimes the hardest thing to get a script to do is to do nothing at all—for a specific amount of time. Fortunately, JavaScript includes a built-in function to do this. The window.setTimeout method allows you to specify a time delay and a command that will execute after the delay passes.

Note

Timeouts don't actually make the browser stop what it's doing. Although the statement you specify in the setTimeout method won't be executed until the delay passes, the browser will continue to do other things while it waits (for example, acting on event handlers).

You begin a timeout with a call to the setTimeout() method, which has two parameters. The first is a JavaScript statement, or group of statements, enclosed in quotes. The second parameter is the time to wait in milliseconds (thousandths of seconds). For example, the following statement displays an alert dialog box after 10 seconds:

ident=window.setTimeout("alert('Time's up!')",10000);

Note

Like event handlers, timeouts use a JavaScript statement within quotation marks. Make sure that you use a single quote (apostrophe) on each side of each string within the statement, as shown in the preceding example.

A variable (ident in this example) stores an identifier for the timeout. This enables you to set multiple timeouts, each with its own identifier. Before a timeout has elapsed, you can stop it with the clearTimeout() method, specifying the identifier of the timeout to stop:

window.clearTimeout(ident);

Updating a Page with Timeouts

Normally, a timeout only happens once because the statement you specify in the setTimeout statement is only executed once. But often, you'll want your statement to execute over and over. For example, your script may be updating a clock or countdown and need to execute once per second.

You can make a timeout repeat by issuing the setTimeout() method call again in the function called by the timeout. Listing 11.3 shows an HTML document that demonstrates a repeating timeout.

Example 11.3. Using timeouts to update a page every two seconds

<html>
<head><title>Timeout Example</title>
<script language="javascript" type="text/javascript">
var counter = 0;
// call Update function in 2 seconds after first load
ID=window.setTimeout("Update()",2000);
function Update() {
   counter++;
   window.status="The counter is now at " + counter;
   document.form1.input1.value="The counter is now at " + counter;
// set another timeout for the next count
   ID=window.setTimeout("Update()",2000);
}
</script>
</head>
<body>
<h1>Timeout Example</h1>
<hr><p>
The text value below and the status line are being updated every two seconds.
Press the RESET button to restart the count, or the STOP button to stop it.
</p><hr>
<form NAME="form1">
<input TYPE="text" NAME="input1" SIZE="40"><br>
<input TYPE="button" VALUE="RESET" onClick="counter = 0"><br>
<input TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID)">
</form>
<hr>
</body>
</html>

This program displays a message in the status line and in a text field every two seconds, including a counter that increments each time. You can use the Reset button to start the count over and the Stop button to stop the counting.

This script calls the setTimeout() method when the page loads, and again at each update. The Update() function performs the update, adding one to the counter and setting the next timeout. The Reset button sets the counter to zero, and the Stop button demonstrates the clearTimeout() method. Figure 11.2 shows Internet Explorer's display of the timeout example after the counter has been running for a while.

11fig02.jpg

Figure 11.2 The output of the timeout example.

Note

This example and the next one use buttons, which are a simple example of what you can do with HTML forms and JavaScript. You'll learn much more about forms in Hour 12, "Getting Data with Forms."

Share ThisShare This

Informit Network