Home > Developer > JavaScript
1. Only one timer is executed.
Copy codeThe Code is as follows:
<Script>
// Asynchronous timer operation
Function hello (){
Alert ("hello ");
}
// Execution method using the method name
Var t1 = window. setTimeout (hello, 1000 );
Var t2 = window. setTimeout ("hello ()", 3000); // use the string execution Method
Window. clearTimeout (t1); // remove the timer
</Script>
2. Repeat the timer
Copy codeThe Code is as follows:
<Script>
Function hello (){
Alert ("hello ");
}
// Repeat a method
Var t1 = window. setInterval (hello, 1000 );
Var t2 = window. setInterval ("hello ()", 3000 );
// Method for removing the timer
Window. clearInterval (t1 );
</Script>
Note:
If there are two methods in a page, they are executed after the page is loaded, but they are not executed in order, you can refer to the following method to solve the problem:
You can add a timer in the onload method, set a timer, and run the timer after "delay" for a period of time to differentiate the order of loading and running methods on the page.
There are two dedicated timer functions in javascrui:
1. Countdown timer: timename = setTimeout ("function ();", delaytime );
2. Cyclic Timer: timename = setInterval ("function ();", delaytime );
The first parameter "function ()" is the action to be executed when the timer is triggered. It can be a function or several functions, separated. For example, to bring up two warning windows, you can replace "function ();"
"Alert ('first warning window! '); Alert ('second warning window! '); ", While the second parameter" delaytime "is the interval. in milliseconds, enter" 5000 ", which indicates 5 seconds.
The countdown timer triggers events after the specified time arrives, while the cyclic timer triggers events repeatedly when the time interval arrives. The difference between the two is that the former only works once, the latter does not stop working.
For example, if you want to automatically jump to another page several seconds after opening a page, you need to use the countdown timer "setTimeout (" function (); ", delaytime )", if you want to set a sentence to appear one by one,
You need to use the cyclic timer "setInterval (" function (); ", delaytime )".
To obtain the focus of a form, document. activeElement. id is used. Use if to determine whether the document. activeElement. id and Form ID are the same.
For example, if ("mid" = document. activeElement. id) {alert () ;}, "mid" is the ID of the form.
Timer:
It is used to execute a program after a specific period of time.
Regular execution in JS, difference between setTimeout and setInterval, and l release method
SetTimeout (Expression, DelayTime): After DelayTime, an Expression is executed. setTimeout is used for a delay period before a certain operation.
SetTimeout ("function", time) sets a timeout object
SetInterval (expression, delayTime). Expression is executed for each DelayTime. It is often used to refresh an expression.
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
Here are two examples.
Example 1. When a form is triggered or loaded, a verbatim string is output.
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Script language = "JavaScript" type = "text/javascript">
Var str = "this is the sample text used for testing ";
Var seq = 0;
Var second = 1000; // interval: 1 second
Function scroll (){
Msg = str. substring (0, seq + 1 );
Document. getElementByIdx_x_x ('word'). innerHTML = msg;
Seq ++;
If (seq> = str. length) seq = 0;
}
</Script>
</Head>
<Body onload = "setInterval ('scroll () ', second)">
<Div id = "word"> </div> <br/>
</Body>
</Html>
Example 2: when the focus is in the input box, check the information of the input box regularly. If the focus is not in the input box, no check action is executed.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Script language = "JavaScript" type = "text/javascript">
Var second = 5000; // The interval is 5 seconds.
Var c = 0;
Function scroll (){
C ++;
If ("B" = document. activeElement. id ){
Var str = "regular check Times <B>" + c + "</B> <br/> ";
If (document. getElementByIdx_x_x ('B'). value! = ""){
Str + = "the current content in the input box is <br/> <B>" + document. getElementByIdx_x_x ('B'). value + "</B> ";
}
Document. getElementByIdx_x_x ('word'). innerHTML = str;
}
}
</Script>
</Head>
<Body>
<Textarea id = "B" name = "B" style = "height: 100px; width: 300px;" onfocus = "setInterval ('scroll () ', second) "> </textarea> <br/>
<Div id = "word"> </div> <br/>
</Body>
</Html>
Example 3: The following is the simplest example. A warning window is displayed when the timer time is reached.
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Script language = "javascript">
Function count (){
Document. getElementByIdx_x_x ('M'). innerHTML = "timing has started! ";
SetTimeout ("alert ('10 seconds! ') ", 10000)
}
</Script>
<Body>
<Div id = "m"> </div>
<Input TYPE = "button" value = "Start Time" onclick = "count ()">
</Body>
</Html>
Example 4: timed countdown jump
Copy codeThe Code is as follows:
<Html>
<Head>
<Base href = "<% = basePath %>">
<Title> My JSP 'ds04. jsp 'starting page </title>
<Span id = "tiao"> 3 </span>
<A href = "javascript: countDown"> </a> automatic jump in seconds ......
<Meta http-equiv = refresh content = 3; url = '/ds02.jsp'/>
<! -- Start the script -->
<Script language = "javascript" type = "">
Function countDown (secs ){
Tiao. innerText = secs;
If (-- secs> 0)
SetTimeout ("countDown (" + secs + ")", 1000 );
}
CountDown (3 );
</Script>
<! -- Script end -->
</Head>
Example 6:
Copy codeThe Code is as follows:
<Head>
<Meta http-equiv = "refresh" content = "2366url}' B .html '">
</Head>
Example 7:
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
SetTimeout ("too many location.href=' B .html '", 2000 );
// Both of the following can be used
// SetTimeout ("javascript: location.href=' B .html '", 2000 );
// SetTimeout ("too many locationparameters 'B .html'", 2000 );
</Script>
Example 8:
Copy codeThe Code is as follows:
<Span id = "totalSecond"> 2 </span>
<Script language = "javascript" type = "text/javascript">
Var second = document. getElementByIdx_x ('totalsecond'). innerHTML;
If (isNaN (second )){
//...... Not a Digital Processing Method
} Else {
SetInterval (function (){
Document. getElementByIdx_x ('totalsecond'). innerHTML = -- second;
If (second <= 0 ){
Window. location = 'B .html ';
}
},1000 );
}
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
