JavaScript The Definitive Guide 4th Edition-13.4 Timeouts and Intervals

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.