Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Advanced JavaScript Lesson 12:
Clearing A setInterval()

Code Tutorials



Site Development



Downloads



Help!!



Home

An Overview

We may not always want our "setInterval()" loops to run forever, as in our previous lesson's slideshow. Say we want to add a "stop button" so the viewer can stop the slideshow, or we want to stop the slideshow after a given number of runs.

Enter "clearInterval()". This method will stop a "setInterval()". The examples on this page were built from our previous slideshow example

Using clearInterval()

There are two steps to using "clearInterval()". First, you need to name your "setInterval()" so "clearInterval()" will know which "setInterval()" to clear. (Yes, you can have as many "setInterval()s" running as you'd like.)

Here's how to give an object name to a "setInterval()":

showtime = setInterval("change()", 1000);

All you need to do is think up a name, I used "showtime", and then set it equal to a "setInterval()". I used the "setInterval()" from the previous lesson.

Now that our "setInterval()" has a name, we can clear it using --

clearInterval(showtime);

Whenever the above code is encountered while "showtime" is running, it will shut "showtime" down. Now lets look at some working examples.

clearInterval() With Events

Look at this example. It has two links. The "STOP!" link will clear the "setInterval()" and stop the slideshow. The "RESTART" link will recall the function containing the "setInterval()" and restart the slideshow where it left off.

First, we need to give an object name to our "setInterval()" as described above. I used "showtime".

Here's the code for the "STOP!" link. This link is coded in the page's <body>.

<a href="javascript: clearInterval(showtime)"> STOP! </a>

Whenever the link is clicked, the "clearInterval(showtime)" is run and "showtime" is stopped.

The "RESTART" link just calls the original function that started the "setInterval()".

<a href="javascript: slideshow()"> RESTART </a>

Since the counting variable, "i", isn't reset to a given value; restarting the "setInterval()" just begins the slideshow where it left off.

clearInterval() In functions

Now look at this example. It runs through the slideshow twice and then quits. This effect is coded by making a second counting variable to count the number of cycles the slideshow has run. Then it uses a second IF statement to detect if the slideshow should be stopped with a "clearInterval()".

I called the second counting variable "counter". Here's how it's initialized:

<script language="JavaScript">

/* Image Preloading */
a = new Image();a.src = "screw.jpg";
b = new Image(); b.src = "washer.jpg";
c = new Image(); c.src = "capnut.jpg";
d = new Image(); d.src = "coffee.gif";
//end image preloading

pix = new Array("screw.jpg","washer.jpg","capnut.jpg","coffee.gif");

var i = 0;
var counter = 1;

function slideshow(){
showtime = setInterval("change()", 1000);
}

</script>

Look at the above code for awhile until you recognize everything. The only thing added from the basic Advanced Slideshow is that I've added another variable called "counter" and initialized it to 1.

Now I've got two variables I can increment. The "i" variable will still control the image displayed. The new "counter" variable will be used to count the number of times the slideshow has cycled through the images in the array. Here's one way to increment "counter":

<script language="JavaScript">

/* Image Preloading */
a = new Image();a.src = "screw.jpg";
b = new Image(); b.src = "washer.jpg";
c = new Image(); c.src = "capnut.jpg";
d = new Image(); d.src = "coffee.gif";
//end image preloading

pix = new Array("screw.jpg","washer.jpg","capnut.jpg","coffee.gif");

var i = 0;
var counter = 1;

function slideshow(){
showtime = setInterval("change()", 1000);
}

function change(){
document.images.pic.src = pix[i];
i = i + 1;
if (i > (pix.length - 1)) {i = 0; counter = counter + 1;}

if (counter > 2) {clearInterval(showtime);}
}

</script>

Our IF statement for "i" already tells us when one complete cycle has completed and resets "i" to 0. We can just add incrementing for "counter" to this IF.

A second IF is needed to see if "counter" has exceeded the effect's "two pass" limit. After the slideshow has run twice, "counter" will equal 3. The second IF statement will detect this and run the "clearInterval(showtime)" that will stop the slideshow.

You'll need to play around with using multiple counters to create different effects. The varieties are endless.

Summary & Exercises

You can stop programs running under "setInterval()" by clearing the "setInterval()" with "clearInterval()".

To use "clearInterval()" you must first name your "setInterval()". Just make up a name and set it equal to the "setInterval()" statement.

Use the object name created above in the "clearInterval()" -- clearInterval(showtime).

You can use "clearInterval()" in events or in other functions.

You can use as many "counter" variables as you need. It all depends on what effect you are coding. Remember that there are three factors to making and using a counter: 1) declare and initialize the variable. 2) Increment it somewhere in the code. 3) Test it with an IF statement. You can use these counters as needed to modify object properties.



To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index