Rational use of the timer Item23 in JavaScript _ javascript skills

The window object provides two methods to implement the timer effect, namely window. setTimeout () and window. setInterval. The former allows a piece of code to run after a specified time, while the latter allows a piece of code to run once every time after a specified time in the javascrui. There are two dedicated functions for the timer. they are:

1. countdown timer: timename = setTimeout ("function ();", delaytime );
2. cyclic timer: timename = setInterval ("function ();", delaytime );

1. timer overview

The window object provides two methods to implement the timer effect, namely window. setTimeout () and window. setInterval. The former allows a piece of code to run after a specified time, while the latter allows a piece of code to run once every time. Their prototype is as follows:

window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 

Expression can be a piece of code enclosed in quotation marks or a function name. at the specified time, the system automatically calls the function, when a function name is used as the call handle, it cannot contain any parameters. when a string is used, you can write the parameters to be passed. The second parameter of the two methods is milliseconds, which indicates the number of milliseconds of delay or repeated execution. The following describes two methods.

SetInterval is similar to setTimeout. SetTimeout is used to perform an operation after a delay period.

SetTimeout ("function", time) sets a timeout object
SetInterval ("function", time) sets a timeout object
SetInterval indicates automatic repetition, and setTimeout does not.

ClearTimeout (object) clears the set setTimeout object
ClearInterval (object) clears the set setInterval object
Use a timer to implement deferred or repeated JavaScript execution.

2. specific use

1. window. setTimeout method

This method can delay the execution of a function, for example:

function hello(){   alert("hello"); } window.setTimeout(hello,5000); 

This code will enable the page to open for 5 seconds and then display the "hello" dialog box ". The last sentence can also be written as follows:

window.setTimeout("hello()",5000); 

Readers can understand their differences. they also have such properties in the window. setInterval method.

If the execution is canceled before the delay period expires, you can use the window. clearTimeout (timeoutId) method, which receives an id, indicating a timer. This id is returned by the setTimeout method, for example:

function hello(){    alert("hello"); } var id=window.setTimeout(hello,5000); document.onclick=function(){    window.clearTimeout(id); } 

In this way, to cancel the display, you only need to click any part of the page to execute the window. clearTimeout method, so that the timeout operation is canceled.

2. window. setInterval method

This method is a common method that allows a function to be called at regular intervals. To cancel scheduled execution, call the window. clearInterval method, similar to the clearTimeout method. The clearInterval method also receives the value returned by a setInterval method as a parameter. For example:

// Define a call for repeated invocation var id = window. setInterval ("somefunction", 10000); // cancel the scheduled execution of window. clearInterval (id );

3. Demo small exercises

The above code is only used to describe how to cancel a scheduled execution. In fact, the setInterval method is used in many cases. next we will design a stopwatch to introduce the purpose of the setInterval function: This stopwatch will contain two buttons and a text box for displaying time. Start timing when you click the Start button. the minimum unit is 0.01 seconds. click the button again to stop Timing. the text box shows the elapsed time. Another button is used to clear the current time. The implementation code is as follows:

  New Document