Syntax and application of a settimeout function and setinterval function
1.setTimeout function
definition and usage:the SetTimeout () method is used to call a function or evaluate an expression after a specified number of milliseconds.
Syntax:setTimeout (code,millisec);
Parameters:code (required): The JavaScript code string to execute after the function to be called. millisec (required): The number of milliseconds to wait before executing the code.
Note:setTimeout () executes code only once. If you want to call more than once, use SetInterval () or let code itself call SetTimeout () again. return value
A value that can be passed to window.cleartimeout () to suppress periodic execution of code.
since settimeout is a timer function, then there is a function to clean up the timer, then we use the Cleartimeout function. cleartimeout (SetTimeout () returns the ID value);
2.setInterval Definition
The SetInterval () method invokes a function or evaluates an expression according to the specified period (in milliseconds ).
The SetInterval () method keeps calling functions until Clearinterval () is called or the window is closed. The ID value returned by SetInterval () can be used as a parameter to the Clearinterval () method.
Grammarsetinterval (code,millisec[, "Lang"]);parameter code required. The function to invoke or the code string to execute.
Millisec must. The time interval between the periodic execution or invocation of code, measured in millisecondsreturn value
A value that can be passed to Window.clearinterval () to suppress periodic execution of code.
since settimeout is a timer function, then there is a function to clean up the timer, then we use the Clearinterval () function. clearinterval () (SetInterval () returns the ID value);
eg.
1. The countdown effect
<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title> Countdown effect </title> <script type="Text/ecmascript">//use JS mode to achieve the countdown effect varT1; Window.onload=function () {//01 Navigate to Start button to return a DOM object varBtns = document.getElementById ('btnstart'); //02. Register the Click event with the Start buttonBtns.onclick =function () {//executes the function that the first parameter of the Ssetinerval function executes, and the second argument executes every number of milliseconds.T1= setinterval (Start, +); } //03 Navigate to the Stop button to return a DOM object varBtnst = document.getElementById ('Btnstop'); Btnst.onclick=function () {clearinterval (T1); } } //functions to be executed at 1 second intervalsfunction Start () {//01. Get the text in the div assigned to a variable varDivdom = document.getElementById ('msg'); varDivnum =Divdom.innertext; //determine if the value of Divnum is 0 if(Divnum >0) {Divnum--; //re-assign the value to DivnumDivdom.innertext =Divnum; } } </script>"Button"Id="btnstart"Value="Start"/> <input type="Button"Id="Btnstop"Value="Stop"/><br/> <div id="msg">Ten</div></body>2. Switch the picture<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <script type="Text/javascript">varCount =1;//define initial variable default to first pictureWindow.onload =function () {//Use the Timer function to define a show function once every secondSetInterval (Show, +); } //the function to executefunction Show () {//If the picture reaches the last sheet (5 photos), the next picture will be changed to the first one, and the next picture will be displayed if the last one is not reached . if(Count >5) {Count=1; } Else{Count++; } //get DOM object with ID myimg varDom = document.getElementById ("myimg"); //change the src attribute of the IMG tag to point to, change the pictureDOM.SRC ="image/"+count+". jpg" } </script>"image/1.jpg"alt="Alternate Text"Width="200px"height="200px"Id="myimg"/></body>JavaScript (timer function)