The following extracts from the "Conquer Ajax Web2.0 Development Technology detailed", today in the book tube reading feel very good, hereby extract! A small amount of content and code has been changed!
The Window object provides two methods to implement the timer effect, namely window.settimeout () and Window.setinterval. The former can cause a piece of code to run after a specified amount of time, while the latter can cause a piece of code to run once per specified time. Their prototypes are as follows:
Copy Code code as follows:
Window.settimeout (Expression,milliseconds);
Window.setinterval (Expression,milliseconds);
Where expression can be a piece of code enclosed in quotes, it can also be a function name, which is called automatically by the system at the specified time, and when the function name is used as the calling handle, it cannot have any arguments, and when a string is used, the parameter to pass can be written to. The second parameter of the two method is milliseconds, which indicates the number of milliseconds that are delayed or repeated. Here are two ways to describe each.
1. Window.settimeout method This method can delay the execution of a function, for example:
<script language= "JavaScript" type= "Text/javascript" > <!--function Hello () {alert ("Hello"); } window.settimeout (hello,1000); --> </script> A second will pop up "Hello"
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This code will cause the page to open for 5 seconds before the dialog box "Hello" is displayed. The last sentence can also be written as:
Window.settimeout ("Hello ()", 1000);
Readers can appreciate their differences, which are also true in Window.setinterval methods.
If you cancel the delay before the deadline arrives, you can use the Window.cleartimeout (Timeoutid) method, which receives an ID representing a timer. This ID is returned by the SetTimeout method, for example:
<script language= "JavaScript" type= "Text/javascript" > <!--function Hello () {alert ("Hello"); } var id=window.settimeout (hello,1000); Document.onclick=function () {window.cleartimeout (ID); }//--> </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In this way, if you want to suppress the display, simply click on any part of the page to execute the Window.cleartimeout method so that the timeout operation is canceled.
2. Window.setinterval method
This method makes a function to be called once every fixed time, is a very common method. If you want to cancel timed execution, like the Cleartimeout method, you can call the Window.clearinterval method. The Clearinterval method also receives the value returned by a setinterval method as an argument. For example:
Copy Code code as follows:
Define a call that executes repeatedly
var id=window.setinterval ("somefunction", 10000);
Cancel timed execution
Window.clearinterval (ID);
The above code is used only to illustrate how to cancel a timed execution. In fact, there are many occasions where the SetInterval method is needed, and a stopwatch is designed to describe the purpose of the SetInterval function: The stopwatch will include two buttons and a text box to display the time. When the Start button is clicked, the minimum unit is 0.01 seconds, and the Click button stops timing, and the text box displays the elapsed time. Another button is used to clear the current time to zero. The implementation code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title> New Document &L t;/title> </pead> <body> <form action= "somepage.asp" > <input type= "text" value= "0" name= "txt1" /> <input type= "button" value= "Start" name= "Btnstart"/> <input "button" type= "reset" value= "Name=" Btnreset & lt;/form> </body> </ptml> <script language= "JavaScript" type= "Text/javascript" > <!--//Get the form form field var txt=document.forms[0].elements["Txt1"]; var btnstart=document.forms[0].elements["Btnstart"]; var btnreset=document.forms[0].elements["btnreset"]//define the ID var ID of the timer; This value is increased by 1 Var seed=0 per 10 milliseconds; Btnstart.onclick=function () {////Based on button text to determine current action if (this.value== "start") {//Make button text stop This.value= "Stop"; Make the reset button unavailable btnreset.disabled=true; Set timer, every 0.01s jump Id=window.setinterval (tip,10); }else{ Change the button text to start this.value= "start"; Make the reset button available Btnreset.disabled=false; Cancel timed window.clearinterval (ID); }//Reset button btnreset.onclick=function () {seed=0; //Let the stopwatch jump a grid function tip () {seed++; txt.value=seed/100; }//--> </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
