Javascript timers

This lesson refers to the previous one on rollovers.

You have just seen how to use mouseover and mouseout events to implement a rudimentary animation. But you can use a timer to achieve the same thing - get one or more images to replace others. We'll look at a simple example now using the same two images as previously, the eye and the shutter.

Javascript timers come in two flavours, setInterval and setTimeOut. You use setInterval to execute code every so often, a second, for example; you use setTimeOut to delay execution of your code (don't run the code until 5 seconds have passed).

The timer we'll use is setInterval.

Create a new web page for this from your template. Keep your SCRIPT tags in the HEAD section. Save the page in the same folder as your two images (home.jpg and home2.jpg).

Add the following HTML to the BODY section:

<BODY>

<P><IMG SRC="home.jpg" ID="img1"></P>

<P><INPUT TYPE="button" value=" START " onClick="timer()"></P>

</BODY>

So it's just the home.jpg image with an ID of img1. We also have a button that has an onClick event. The event calls a function with the name timer.

Add this timer function between your two SCRIPT tags, as well as the Boolean variable above it (you'll see what the flip variable does shortly):

var flip = false;

function timer() {

animation = setInterval( "pics()", 1000 );

}

In between the curly brackets of the function, we have this line:

animation = setInterval( "pics()", 1000 );

This sets up a global variable that we've called animation. (It's global because there's no var keyword before it. This way, the rest of the code can see what's in it.) To the right of the equal sign, we have this:

setInterval( "pics()", 1000 );

The setInterval method needs two things. The first thing it needs is the name of a function. The second thing it needs is a time in milliseconds (1000 milliseconds = 1 second). The two are separated by a comma. What setInterval does is to execute your function once after every millisecond, or whatever time you put after the comma. If you had 3000 after the comma the function would get execute once every 3 seconds.

The value setInterval returns is an ID. You use this ID to stop the timer, which you'll see how to do soon.

The pics function can now be added to your code. Here it is:

function pics() {

if (flip == false) {

document.getElementById("img1").src = "home2.jpg";

}
else {

document.getElementById("img1").src = "home.jpg";

}

flip = !flip;

}

You'll recognise the document.getElementById lines from the previous section. They are exactly the same. This time, however, they are wrapped up in an IF … ELSE statement. If the Boolean variable called flip is set to false then the home2.jpg image is displayed. If it's set to true then the other image is displayed. The final line is this:

flip = !flip;

This read "flip equals NOT flip." In other words, we're setting the variable to be the opposite of what it currently is. If we don't do this the variable would be stuck on false all the time and the animation wouldn't work.

Try it out. Save your work and load the page in a browser. Click the START button. You should see the eye and the shutter animation play.

However, we need a way to stop it. To do that Javascript has a clearInterval method. In between its round brackets you only need an ID. This is the ID from the left of the equals sign we set up earlier:

animation = setInterval( "pics()", 1000 );

The variable animation is the one that holds the ID, which is returned from setInterval. You then just do this:

clearInterval( animation );

Notice you don't need to set up a variable for clearInterval - just pass it your ID.

So add a new button to your BODY tags. This one:

<INPUT TYPE="button" value=" STOP " onClick="stopTimer()">

Now add the stopTimer function to your code:

function stopTimer() {

clearInterval(animation);

}

Save your work and refresh the page in your browser. Start the animation again. When you're tired of it, click the STOP button. You should find that the animation halts straightaway.

 

We'll move on from Javascript and images now. However, we'll come back to them in the HTML5 and the Canvas Tag section. Next up is HTML5 and Geolocation.