Time and Timers

Abstract: An introduction to the use of time and timers in JavaScript program, with some emphasis on their use in educational applications, particularly quizzes.

Introduction

Often, we want something to happen to our pages after a period of time elapses. Some "timed changes" we might want include

• providing hints to students taking too long to answer a question
• moving to another question after too much time has passed
• updating a clock or animation

In addition, we might want to use time in other ways, such as keeping track of how much time students spend on individual pages.

JavaScript provides a number of mechanisms for dealing with time, including a facility for scheduling actions and a date object (which is also used for times).

Scheduling Actions

Many of our uses of time relate to scheduling an action at a certain time, or after a particular amount of time has passed. JavaScript permits you to say something like "after N milliseconds have passed, do this".

The function for scheduling operations is setTimeout() and it has the form setTimeout(operation,delay). The delay is in milliseconds.

For example, if I want to bring up a dialog box after ten seconds, I'd use
setTimeout('alert("You may need some help")', 10000)

setTimeout returns a value that we can use at a later date. The primary use of that value is to cancel a scheduled operation, which you do with clearTimeout().

For example, when we load a page, we might start a timer for providing help. When the student clicks a button, we might want to cancel the help (and possibly reschedule it for a later time).

Repeating Actions

Because there are no limitations on the code that is executed, it is possible for the routine called by setTimeout() to schedule additional actions. This repeated use of setTimeout() is often employed in the creation of marquees, clocks, and such. As I've noted before, this is not the best design decision. Nonetheless, we'll experiment with it slightly.

Let's create a page in which the image changes every second. We can take advantage of our previously written selectFish routine and simply ensure that we call it every second. Basically, we'll add a helper routine which we call when the document loads. This routine updates the image and then schedules another update in one second.

// Function:
//   updateFish()
// Parameters:
//   (none)
// Description:
//   Updates the fish image and schedules another update in one second
function updateFish()
{
  selectFish();
  setTimeout("updateFish()", 1000);
} // updateFish()

You can view an example.

The Date Object

JavaScript provides a simple date object for dealing with times. You can obtain the current date/time with

<script language="javascript">
now = new Date();
</script>

The date object provides many methods. Of particular interest are

• getTime(), which returns the number of milliseconds since a particular date (usually January 1, 1970)
• getYear(), getMonth(), getDate(), getHours(), getMinutes(), and getSeconds(), which extract the appropriate portion of the date. All but getDate() use 0-based numbering (so that, for example, January is month 0).
• setYear(), setMonth(), setDate(), setHours(), setMinutes(), and setSeconds(), which set the appropriate portion of the date
• toGMTString(), which provides the date in a somewhat readable format.

To determine how long the user spends on the page, you would create a new date object when you first load the page, create another when you leave the page, and compare the values their getTime() method returns.