If you're reading this, and not passed out on your keyboard, an "OK! Exhale!" alert box did indeed pop up three seconds after you hit the button, and you were then redirected to this page after hitting "OK."
It's easy to time events in JavaScript. The key commands
are the setTimeout() and clearTimeout() methods. With setTimeout(), JavaScript executes a certain command some time in the future. And if you change your mind, clearTimeout() cancels setTimeout.
What follows is the basic format of a setTimeout.
var the_timeout = setTimeout("some javascript statement",
some_number_of_milliseconds);
In the hold-your-breath example on the previous page, the command was:
var the_timeout = setTimeout("alertAndRedirect();",3000);
There are three important things to notice about this statement:
setTimeout returns a value.
In this statement, the_timeout is a variable that keeps track of this specific setTimeout. If you ever want
to cancel this specific setTimeout, you can refer to it using the variable. We'll see an example of this later. And, of course,
as is true for all variables, it doesn't have to be called the_timeout.
It can be called "Frankenstein" for all JavaScript cares.
The first parameter to setTimeout is a string that contains a JavaScript statement.
In this example, the first parameter is the string: "alertAndRedirect();"
alertAndRedirect is just a function I wrote that launches an alert box and redirects to this page when the user clicks "OK."
Note that the stuff in quotes is a complete JavaScript statement, with a semicolon and everything. If you executed only this statement, it would call the alertAndRedirect function. The setTimeout merely schedules that statement to occur at a specific time.
If you want to see how it works, here's the alertAndRedirect() function:
function alertAndRedirect()
{
alert('ok! exhale!');
window.location.replace("timing.htm");
}
The second parameter of setTimeout indicates how many milliseconds from now you want to execute the first parameter.
There are 1,000 milliseconds in a second. So, to have something happen three seconds from now, the second parameter has to be 3,000 milliseconds.
JavaScript is told by setTimeout to "call this statement x many milliseconds from now." Remember that, and you'll be fine.
To make sure you know what's going on, here's a little exercise: Make a button that tells you when three seconds, six seconds, and nine seconds have passed. Like this one:
When you've figured it out, or gotten sick of trying, take a look at
my solution to the timer exercise.
