لطفا منتظر باشید ...
•
Table of Contents
•
Index
•
Reviews
•
Examples
•
Reader Reviews
•
Errata
JavaScript: The Definitive Guide, 4th Edition
By
David Flanagan
Publisher
: O'Reilly
Pub Date
: November 2001
ISBN
: 0-596-00048-0
Pages
: 936
Slots
: 1
This fourth edition of the definitive reference to
JavaScript, a scripting language that can be embedded
directly in web pages, covers the latest version of the
language, JavaScript 1.5, as supported by Netscape 6 and
Internet Explorer 6. The book also provides complete
coverage of the W3C DOM standard (Level 1 and Level 2),
while retaining material on the legacy Level 0 DOM for
backward compatibility.
13.4 Timeouts and Intervals
The setTimeout( ) method of the
Window object
schedules
a piece of JavaScript code to be run
at some specified
time in the future. The clearTimeout( ) method can
be used to cancel the execution of that code. setTimeout(
) is commonly used to perform animations or other kinds of
repetitive actions. If a function runs and then uses
setTimeout( ) to schedule itself to be called
again, we get a process that repeats without any user intervention.
JavaScript 1.2 has added the setInterval( ) and
clearInterval( )
methods, which are like setTimeout( ) and
clearTimeout( ),
except that they automatically reschedule the code to run repeatedly;
there is no need for the code to reschedule itself.
The setTimeout( ) method is commonly used in
conjunction with the status or
defaultStatus properties to animate some kind of
message in the status bar of the browser. In general,
animations involving the status bar are
gaudy, and you should shun them! There are, however, a few
status-bar animation techniques
that can be useful and in good taste. Example 13-2
shows such a tasteful status-bar animation. It displays the current
time in the status bar and updates that time once a minute. Because
the update occurs only once a minute, this animation does not produce
a constant flickering distraction at the bottom of the browser
window, like so many others do.
Note the use of the onload event handler of the
<body> tag to perform the first call to the
display_time_in_status_line(
) method. This event handler is
invoked once when the HTML document is fully loaded into the browser.
After this first call, the method uses setTimeout(
) to schedule itself to be called every 60 seconds so that
it can update the displayed time.
Example 13-2. A digital clock in the status line
<html>
<head>
<script>
// This function displays the time in the status line
// Invoke it once to activate the clock; it will call itself from then on
function display_time_in_status_line( )
{
var d = new Date( ); // Get the current time
var h = d.getHours( ); // Extract hours: 0 to 23
var m = d.getMinutes( ); // Extract minutes: 0 to 59
var ampm = (h >= 12)?"PM":"AM"; // Is it a.m. or p.m.?
if (h > 12) h -= 12; // Convert 24-hour format to 12-hour
if (h == 0) h = 12; // Convert 0 o'clock to midnight
if (m < 10) m = "0" + m; // Convert 0 minutes to 00 minutes, etc.
var t = h + ':' + m + ' ' + ampm; // Put it all together
defaultStatus = t; // Display it in the status line
// Arrange to do it all again in one minute
setTimeout("display_time_in_status_line( )", 60000); // 60000 ms is one minute
}
</script>
</head>
<!-- Don't bother starting the clock till everything is loaded. The
-- status line will be busy with other messages during loading, anyway. -->
<body onload="display_time_in_status_line( );">
<!-- The HTML document contents go here -->
</body>
</html>
In JavaScript 1.2, Example 13-2 could be written
using setInterval( ) instead of
setTimeout( ). In this case, the
setTimeout( ) call would be removed from the
display_time_in_status_line( ) method, and
we'd remove the onload event handler.
Instead, after defining display_time_in_status_line(
), our script would call setInterval( )
to schedule an invocation of the function that automatically repeats
once every 60,000 milliseconds.
