Page 1/2 of the Javascript advanced tutorial (Part 2 of Lesson 3)

To make the timer work cyclically, you need to write a function to implement cyclic calling. Here is an example:

VaR the_count = 0;
VaR the_timeout;
Function dotimer ()
{
Optional parameter Doc ument. timer_form.the_text.value = the_count;
The_count + = 2;
The_timeout = setTimeout ("dotimer ();", 2000 );
}

The timer used here is the timer used for the previous page. This function is called when you click the button. This function writes the current value of the_count to the text box. Then, if the_count is increased by 2, the function itself is called. The value in the text box is also updated accordingly. If the_count is increased by 2, the function itself is called again. During these two seconds, the browser can perform other synchronization tasks. When the_count is increased by 2, another setTimeout () is executed (). You don't have to worry about memory crash because only one setTimeout () is executed within a given time.

The infinite "while" loop locks the work of the browser. When executing this loop, the browser cannot execute any other commands at the same time. SetTimeout allows the browser to execute other work in the gap between loops.

How to cancel setTimeout?

Now you have learned how to set an infinite loop. But you must understand how to terminate the loop. The command is cleartimeout. In the above example, the timer also has the following form elements:

<Input type = "button" value = "Stop timer" onclick = "cleartimeout (the_timeout);">

Click this button to terminate the timer. The command is cleartimeout (), which is actually very simple. If you set setTimeout, the_timeout = setTimeout ("Some JavaScript", 3000 );

You can cancel the timer as follows: cleartimeout (the_timeout );

Very simple, right? Next we will look at a complex cycle timer, a timer that can report time.

The current time is:

Click "Start Clock" to start the clock. It reads time from your computer and updates the display in the text box every half second. In this example, a timer is set through a self-called function. In addition, this example allows you to understand the functions of the date object. I mentioned the date object when explaining cookies.

Below isCode:
Function writetime (){
// Obtain the date object
VaR today = new date ();

// Obtain information from the object
VaR hours = today. gethours ();
VaR minutes = today. getminutes ();
VaR seconds = today. getseconds ();

// Fixtime enables normal display of minutes and seconds
// Add a value of 0 before a number smaller than 10.
Minutes = fixtime (minutes );
Seconds = fixtime (seconds );

// Combine the time strings and write them out.
VaR the_time = hours + ":" + minutes + ":" + seconds;
Optional parameter Doc ument. the_form.the_text.value = the_time;

// Execute this function every half second
The_timeout = setTimeout ('writetime (); ', 500 );
}

Function fixtime (the_time ){
If (the_time <10)
{
The_time = "0" + the_time;
}

Return the_time;
}

Let's take a closer look at the code.

VaR today = new date ();
Just as new array () can generate a new array, you can use new date () to generate a new date object. After an object is generated, you can ask your question. There is no parameter in the brackets of the new date object you generated, but JavaScript will query the computer and always generate the new date object with it. Now our date object is named "today", from which we can extract the corresponding information.

VaR hours = today. gethours ();
This is used to obtain the current hour value. It is in military format, that is, if the current time is two o'clock P.M., it returns 14. Gethours () is a built-in method call for JavaScript date objects.

VaR minutes = today. getminutes (); var seconds = today. getseconds ();
The principle of these rows is similar to that of gethours.

Minutes = fixtime (minutes );
Getminutes has some problems. If the minute is, getminutes returns "1 ". The display format of the clock is not like this. It should be displayed as "01 ". The fixtime function is used to correct the display format.

The following two strings are combined and displayed,
The_timeout = setTimeout ('writetime (); ', 500 );

Set the cycle for executing the function every half second.

Next we will learn how to add variables to the timer.