Section 14.1. Timers

14.1. Timers

An important feature of any programming environment is the ability to schedule code to be executed at some point in the future. The core JavaScript language does not provide any such feature, but client-side JavaScript does provide it in the form of the global functions setTimeout( ), clearTimeout( ), setInterval( ), and clearInterval( ). These functions don't really have anything to do with the Window object, but they are documented in this chapter because the Window object is the global object in client-side JavaScript and these global functions are therefore methods of that object.

The setTimeout( ) method of the Window object schedules a function to run after a specified number of milliseconds elapses. setTimeout( ) returns an opaque value that can be passed to clearTimeout( ) to cancel the execution of the scheduled function.

setInterval( ) is like setTimeout( ) except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds. Like setTimeout( ), setInterval( ) returns an opaque value that can be passed to clearInterval( ) to cancel any future invocations of the scheduled function.

Although the preferred way to invoke setTimeout( ) and setInterval( ) is to pass a function as the first argument, it is also legal to pass a string of JavaScript code instead. If you do this, the string is evaluated (once or repeatedly) after the specified amount of time. In old browsers, such as IE 4, functions are not supported, and you must invoke these methods with a string as the first argument.

setTimeout( ) and setInterval( ) are useful in a variety of situations. If you want to display a tool tip when a user hovers her mouse over some document element for more than half a second, you can use setTimeout( ) to schedule the tool tip display code. If the mouse moves away before the code is triggered, you can use clearTimeout( ) to cancel the scheduled code. setTimeout( ) is demonstrated later in Example 14-7. Whenever you perform any kind of animation, you typically use setInterval( ) to schedule the code that performs the animation. You'll see demonstrations of this in Examples 14-4 and 14-6.

One useful trick with setTimeout( ) is to register a function to be invoked after a delay of 0 milliseconds. The code isn't invoked right away but is run "as soon as possible." In practice, setTimeout( ) tells the browser to invoke the function when it has finished running the event handlers for any currently pending events and has finished updating the current state of the document. Event handlers (see Chapter 17) that query or modify document content (see Chapter 15) must sometimes use this trick to defer execution of their code until the document is in a stable state.

You can find reference information on these timer functions in the Window object section of Part IV.