var the_count = 0;
var the_timeout;
function doTimer()
{
window.document.timer_form.the_text.value = the_count;
the_count += 2;
the_timeout = setTimeout("doTimer();", 2000);
}

This is the timer that was used on the previous page. When a user clicks on the button, it calls this function, which in turn writes the current value of the_count to the textbox. It then increments the_count by two, and then calls itself in a setTimeout. In two seconds, the setTimeout is executed, cleared, and the function runs again. It changes the value in the textbox, increments the_count, and again uses setTimeout to call itself in two seconds. During those two seconds, the browser just sits around, doing the things that browsers do. When two seconds pass, the function runs again. And another setTimeout() is set once the_count is incremented by two. You don't run out of memory because there's only one setTimeout() running at any given time.

This works, whereas the infinite hell-freezing-over loop on the last page didn't, because infinite "while" loops lock the browser up and prevent anything from happening during the execution of the loop. This setTimeout trick makes sort of a slow loop. In the above example, the browser has two seconds to do things between each iteration.

How to Cancel a setTimeout

Now that you know how to make a timer loop run infinitely, you'll probably want to know how to stop it. This is the magic of clearTimeout. If you look at the HTML of the timer on the previous page, you'll see the following form element:

<input type="button" value="stop timer"
onClick="clearTimeout(the_timeout);">

This is the button you hit to stop the timer. The command to stop a setTimeout is clearTimeout(), which is actually quite simple. When you set a setTimeout like this,
the_timeout = setTimeout("some javascript",3000);

you can cancel it like this:
clearTimeout(the_timeout);

Here's the code:

function writeTime() {

// get a date object
var today = new Date();

// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();

// fixTime makes the minutes and seconds look right
// it just sticks a zero in front of numbers less than 10
minutes = fixTime(minutes);
seconds = fixTime(seconds);

// put together the time string and write it out
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;

// run this function again in half a second
the_timeout= setTimeout('writeTime();',500);

}

function fixTime(the_time) {

if (the_time <10)
{
the_time = "0" + the_time;
}
return the_time;
}

It might look a little long, but that's just because it's well commented. Let's go through the code line by line.

var today = new Date();
Just as new Array() creates a new Array object for you to fill, new Date() creates a new Date object. Once you have the object, you can ask it questions about itself. When you create a Date object with nothing between the parentheses, as we've done, JavaScript looks at the computer's clock and uses it to create a new Date object. Now that we have a Date object, called "today," we can get information from it.

var hours = today.getHours();
This is how to get the current hour. It's military time, so if it's 2 p.m. when you get the new Date(), getHours() will return "14." Understand that getHours() is a built-in method call of the JavaScript Date object. As is the case with most JavaScript objects, the way to know when you should use getHours is by checking with a good JavaScript reference book.

var minutes = today.getMinutes(); var seconds = today.getSeconds();
These lines are just like getHours();.

minutes = fixTime(minutes);
One problem with getMinutes is that if it's 11:01, getMinutes will return a "1." This is fine unless you want to make a clock like we do, in which case, we want the "1" to be written as "01." That's what the fixTime function that I wrote does. It's a pretty straightforward function, so I'm not going to describe it. Just take a quick look at it to see what it's doing.

The next two lines put the string together and write it to the form element.
We've seen this sort of nonsense a million times.

the_timeout = setTimeout('writeTime();', 500);
This is the line that makes the loop. It says "in half a second, call the function again." When the function gets called again, it does another today = new Date(), which sends it to the computer's clock again. The interval could have been every second, but doing it every half second helps keep the time more accurate.