Posted by Jonathan Brownell on September 21, 1998 at 11:48:31:

In Reply to: Scripting timers posted by Blaine T. on September 16, 1998 at 13:49:24:

Scripting timers can easily be created that run specified lines of code. The SetTimeout() function is part of the Window object's browser model. An example would show this best. Let's say you want a clicked button to show an alert box in ten seconds:

[script language="JavaScript"]

function buttonClicked()
{
window.setTimout("alert('Hello! This will show after ten seconds, or 10,000 milliseconds');", 10000);
}

[/script]

See how it works? setTimeout takes two parameters. The first is the line of code to execute, and the second is the number of milliseconds to delay. Note that when using a function such as Alert in the execution string, it's string parameters must be surrounded by single quote (') instead of double quotes ("). There's an obvious reason: if double quotes were used, the browser would parse the line of code and believe that the parameter ended there:

window.setTimeout("alert("hello");",1000);

In this example, the browser would see the first parameter as "alert(", and the second as ");". Very strange results can ensue.

A powerful feature of the setTimeout function is it's ability to create recursive functions. Let's say that you have a text box called myText, and, after a button is clicked, you want the script to set it's text to a number that increments once every second:

[script language="JavaScript"]

var myNumber = 0;

function myButton()
{
myText.value = myNumber;

myNumber++;
// Equivalent to 'myNumber = myNumber + 1;'

window.setTimeout('myButton();', 1000);
}

[/script]

See how it works? myButton() calls itself over... and over... and over... and each time, it sets the text box's value and increments the number. There's only one hitch: there's no way for the user to stop the text box from incrementing. Fortunately, the JavaScript authors fixed this problem for us with another function: clearTimeout().
setTimeout is a function that returns a value. That means that you can use the function in an expression:

myVar = window.setTimeout("alert('hi');",10000");

Now, myVar is set to a value that is like a reference number to the timer. We can use clearTimeout to remove the timer by passing it the reference number:

window.clearTimeout(myVar);

Cool, huh? This makes it easy to create 'stop' and 'start' buttons for the incrementing text box:

[script language="JavaScript"]

var myNumber = 0;
var timerRef = 0;

function buttonGo()
{
myText.value = myNumber;

myNumber++;

timerRef = window.setTimeout('buttonGo();', 1000);
}

function buttonStop()

{

window.clearTimeout(timerRef);
}

[/script]

And there you have it! The 'go' button will start the timer incrementing the text box's value, and the 'stop' button will use the clearTimeout function to cancel the loop. Finally, because the timer functions are part of the browser object model, you can use either VBScript or JavaScript to access them; the function is script-independent!

-Jonathan Brownell

Webworks Webmaster

Follow Ups:

Post a Followup