CIS 89C Client-Side Programming with JavaScript

CIS 89C Client-Side Programming with JavaScript

Unit 13 - Timing (week 6)

References:

McDuffie - Chapter 8 Timing

Topics:

Opening statement

setTimeout() - McDuffie page 234

setInterval()- McDuffie page 236

clearTimeout() and clearInterval()- McDuffie page 236

Image rollover and image preloading - McDuffie page 138 and 239

Better discussion in:

JavaScript, The Definitive Guide, 5^th Edition

by David Flanagan

Summary - McDuffie page 157

***********************************************************

Opening statement

We will look at some timing functions.

***********************************************************

setTimeout()

window.setTimeout() is a window method.

window methods can be written without the window, as:

setTimeout()

( McDuffie page 234 has it misspelled as setTimeOut() )

You use the setTimeout() function to set a timer, which will time out in the number of milliseconds you specify.

You also provide JavaScript code or a function call, which will be called at the time out.

Passing a function, which will be called later is referred to as a call-back function.

Examples:

// 1) code in the setTimeout call

setTimeout("alert('Seven seconds have passed');", 7000);

// 2) function call is the code in the setTimeout call

function myCallbackFunction()

{

alert('Seven seconds have passed');",

}

setTimeout("myCallbackFunction()", 7000);

// 3) callback function specified in the setTimeout call

function myCallbackFunction()

{

alert('Seven seconds have passed');",

}

setTimeout(myCallbackFunction, 7000);

Note: McDuffie showed the name of the callback function in quotes;

that does not work.

Usually McDuffie's book is good, but sometimes old and out of date.

In this section there seems to be two errors:

- spelling Timeout

- wrong quotes

But, these problems may have been correct code when she wrote the book, and the interpreters have changed.

***********************************************************

setInterval()

setInterval() is the same as setTimeout(), except

setTimeout() only executes once, whereas

setInterval() keeps execution and restarting the time interval.

***********************************************************

clearTimeout() and clearInterval()

Because setInterval() runs forever, you need some way to make it stop.

This can be done by remembering the name of the setInterval(), and

using the name to call the clearInterval() function.

Example:

theName = setInterval("alert('Seven seconds have passed');", 7000);

clearInterval("theName");

You can use the same technique with clearTimeout(), if you wish to

stop a timeout before it completes its time.

***********************************************************

Image rollover

Review, then preloading images is new

When you have an anchor to link to a new page, such as:

The text Go to a new page is what the user sees on the page.

When the user clicks on this text, the new page is loaded.

You can use an image, instead of the text:

<img src="newPageLinkImage.gif"

id="link-image-id"

height="12px" width="20px"

alt="Go to a new page"

</a>

The image is what the user sees on the page.

When the user clicks on this image, the new page is loaded.

You can use onmouseover and onmouseout

to change the image, so the link looks different when the mouse is over the link image.

// Similar to the mouse() and mouseout() functions in the web page

// however this code has not been tested.

function overFunction( imageId, imageFileName )

{

imageReference = document.getElementById(imageId);

imageReference.src = imageFileName;

}

<a href="newPage.html"

onmouseover="overFunction("link-image-id",

"overNewPageLinkImage.gif")"

onmouseoout="overFunction("link-image-id",

"newPageLinkImage.gif")"

<img src="newPageLinkImage.gif"

id="link-image-id"

height="12px" width="20px"

alt="Go to a new page"

</a>

Preloading images

There is one problem. It takes time to get the image from the site where the page is kept. We can alleviate this problem by preloading all the images we will use. This slows the loading of the page, but makes the image replacement fast. This is commonly done.

The way to do this is to create an Image object in the head. Then specify the src as the image we want to use. Doing this causes all these images to load when the head is interpreted, before the body is loaded. Then all these images are in the cache on the client machine.

To do this, there are two steps.

1) Create an Image object.

2) Set the src property of the Image object to the URL of the image

Example:

In the script in the head put the following global code:

var preloadedImage1 = new Image();

preloadedImage1.src = "overNewPageLinkImage.gif ";

This will retrieve the image from the directory where the page is located, and put a copy into the cache on the client machine, where it can be used without going back to the web page server.

***********************************************************

Summary

We have seen setTimeout() which causes an event once, when the time runs out.

We have also seen setInterval() which fires repeatedly.

They can be reset with clearTimeout() and clearInterval()

We also saw how to set up an Image object in the head with a src, to preload an image. This allows rapid image rollover.