Home > Developer > Web Develop

Use of the JS timer (example explained)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article mainly introduces the method of using the timer in JS. Need friends can come to the reference, I hope to help you

In JAVASCRITP, there are two dedicated functions for timers, respectively:

1. Countdown Timer: Timename=settimeout ("function ();", delaytime);
2. Cycle Timer: Timename=setinterval ("function ();", delaytime);

The first parameter, "function ()", is the action to be performed when the timer is triggered, either as a function or as a function, separated by a ";" between functions. For example, to eject two warning windows, you can "function ();" Into
"Alert (' First warning window! '); Alert (' Second warning window! '); " The second parameter, "Delaytime", is the time interval, in milliseconds, that is, "5000", which represents 5 seconds.
The countdown timer is the trigger event at the specified time, and the loop timer is the recurring event when the interval arrives, the difference being that the former is only a function once, while the latter is continuously functioning.
For example, when you open a page and want to automatically jump to another page for a few seconds, you need to use the countdown timer "SetTimeout (" function (), ", Delaytime)", and if you want to set a sentence to appear as a single word,
The Loop Timer "SetInterval (" function (), ", Delaytime)" is required.

Gets the focus of the form, using the document.activeElement.id. Use if to determine if document.activeElement.id and form IDs are the same.
For example: if ("mid" = = Document.activeElement.id) {alert ()}, "Mid" is the ID of the form.

Timer:
Used to specify that a program executes after a specific period of time.

JS in the timing of execution, settimeout and setinterval differences, and L lifting method

SetTimeout (Expression,delaytime), after Delaytime, will perform a expression,settimeout application for a period of delay before performing an operation.
SetTimeout ("function", time) sets a timeout object

SetInterval (Expression,delaytime), each delaytime, will execute expression. It is often used to refresh an expression.
SetInterval ("function", time) sets a timeout object

SetInterval for automatic repetition, settimeout does not repeat.

Cleartimeout (object) clears the SetTimeout object that has been set
Clearinterval (object) clears the SetInterval object that has been set

Give a brief account of two cases.
Example 1. Verbatim output strings when a form is triggered or loaded

Copy CodeThe code is as follows:
<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 for testing";
var seq = 0;
var second=1000; Interval time 1 seconds
function Scroll () {
msg = str.substring (0, seq+1);
document.getelementbyidx_x_x (' word '). InnerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
<body onload= "setinterval (' scroll () ', second)" >
<div id= "word" ></div><br/><br/>
</body>

Example 2. When the focus is on the input box, check the input box information periodically, and do not perform the check action when the focus is absent.

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 ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<script language= "JavaScript" type= "Text/javascript" >
var second=5000; Interval time 5 Seconds
var c=0;
function Scroll () {
C + +;
if ("b" = = Document.activeElement.id) {
var str= "Timing Check <b>" +c+ "</b> times <br/>";
if (document.getelementbyidx_x_x (' B '). value!= "") {
str+= "The current content of the input box is the current content of <br/><b>" +document.getelementbyidx_x_x (' B '). value+ "</b>";
}
document.getelementbyidx_x_x (' word '). InnerHTML = str;
}
}
</script>
<body>
<textarea id= "B" name= "B" style= "height:100px; width:300px, "onfocus=" setinterval (' scroll () ', second) "></textarea><br/><br/>
<div id= "word" ></div><br/><br/>
</body>

Example 3: The following is the simplest example, the timer time arrives after the warning window pops up.

Copy CodeThe code is as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<script language= "JavaScript" >
function count () {
Document.getelementbyidx_x_x (' m '). Innerhtml= "The timekeeping has begun! ";
SetTimeout ("Alert" (' 10 seconds to! ') ", 10000)
}
</script>
<body>
<div id= "M" ></div>
<input type= "button" value= "timing Start" onclick= "Count ()" >
</body>

Example 4: Countdown timer jump

Copy CodeThe code is as follows:
<base href= "<%=basePath%>" >
<title>my JSP ' ds04.jsp ' starting page</title>
<span id= "Tiao" >3</span>
<a href= "Javascript:countdown" > </a> seconds after auto jump ...
<meta http-equiv=refresh content=3;url= '/ds02.jsp '/>
<!--script Start-up
<script language= "javascript" type= "" >
function Countdown (secs) {
Tiao.innertext=secs;
if (--secs>0)
SetTimeout ("Countdown (" +secs+ ")", 1000);
}
Countdown (3);
</script>
<!--end of script--

Example 6:

Copy CodeThe code is as follows:
<meta http-equiv= "Refresh" content= "2;url= ' b.html '" >

Example 7:

Copy CodeThe code is as follows:
<script language= "javascript" type= "Text/javascript" >
SetTimeout ("window.location.href= ' b.html '", 2000);
You can use all two of the following.
SetTimeout ("javascript:location.href= ' b.html '", 2000);
SetTimeout ("window.location= ' 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)) {
...... It's not a number processing method.
}else{
SetInterval (function () {
document.getelementbyidx_x (' Totalsecond '). InnerHTML =--second;
if (second <= 0) {
window.location = ' b.html ';
}
}, 1000);
}
</script>

JS Timer (execute once, repeat)

Share a JS code, a small example of the JS timer, divided into the execution of a timer and repeated execution of the timer. For beginners of friends reference.

1, the timer only executes once

Copy CodeThe code is as follows:
<script>
Timer runs asynchronously
function Hello () {
Alert ("Hello");
}
How to use method name execution
var T1 = window.settimeout (hello,1000);
var t2 = window.settimeout ("Hello ()", 3000);//Use String execution method
Window.cleartimeout (t1);//Remove Timer
</script>

2, repeat the timer

Copy CodeThe code is as follows:
<script>
function Hello () {
Alert ("Hello");
}
Execute a method repeatedly
var T1 = window.setinterval (hello,1000);
var t2 = window.setinterval ("Hello ()", 3000);
How to remove the timer
Window.clearinterval (t1);
</script>

Note:

If there are two methods on a page that are executed after the page has been loaded, the actual execution is not sequential and can be resolved by the following method:
You can add a timer to the OnLoad method, set a timer, and then run after a period of "delay" to consider the order in which the page load run method is differentiated.



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 ">
<title>untitled page</title>

<script language= "javascript" type= "Text/javascript" >
var YC = new Object ();
function Beginyc ()
{
var secondsyc = document.getElementById ("Txtycseconds"). Value;
Try
{
YC = SetTimeout ("alert (' Delay" +secondsyc+ "second Success ')", secondsyc*1000);
}
catch (E)
{
Alert ("Please enter the correct number of seconds.") ");
}
}
function Overyc ()
{
Cleartimeout (YC);
Yc=null;
Alert ("Termination delay succeeded. ");
}

Use of the/**************************↓↓↓↓ timer ↓↓↓↓********************************/

var timerds = new Object ();
var timerdds = new Object ();
function Beginds ()
{
sn.innerhtml = "0";
Timerds = SetInterval ("AddOne ()", parseint (document.getElementById ("Txtintervalseconds"). value,10) *1000);
}
function Goonds ()
{
Timerds = SetInterval ("AddOne ()", parseint (document.getElementById ("Txtintervalseconds"). value,10) *1000);
}
function Overds ()
{
Clearinterval (timerds);
Timerds=null;
}
function Delayds ()
{
Overds ();
Timerdds = SetTimeout ("Goonds ()", document.getElementById ("Txtddsseconds"). value*1000);
}
function AddOne ()
{
if (sn.innerhtml== "10")
{
Overds ();
Alert ("Congratulations, you have successfully reached 10 seconds");
Return
}
Sn.innerhtml=parseint (sn.innerhtml,10) +1;
}

</script>

<body>
<form id= "Form1" runat= "Server" >
<div>
Use:</div> for the delay device
<div>
<label id= "Label2" title= "delay number of seconds:" ></label>
<input type= "text" id= "Txtycseconds" value= "3"/>
<input type= "button" id= "BTNBYC" onclick= "Javascript:beginyc ()" value= "Start delay"/>
<input type= "button" id= "Btnoyc" onclick= "Javascript:overyc ()" value= "terminating delay"/>
<input type= "button" id= "Button1" onclick= "Javascript:alert (' good monrning ');" value= "normal pop-up window/>
</div>
<br/>
<div>
Use of Timers:</div>
<div>
<div id= "SN" >0</div>
<label id= "Label1" title= "timed interval seconds:" ></label>
<input type= "text" id= "Txtintervalseconds" value= "1"/>
<input type= "button" id= "Btnbds" onclick= "Javascript:beginds ()" value= "Start timing"/>
<input type= "button" id= "Btnods" onclick= "Javascript:overds ()" value= "Terminating timer"/>
<input type= "button" id= "Btngds" onclick= "Javascript:goonds ()" value= "continue timing"/>

<label id= "DS" title= "delay number of seconds:" ></label>
<input type= "text" id= "Txtddsseconds" value= "5"/>
<input type= "button" id= "Btndds" onclick= "javascript:delayds ()" value= "Delay Timer"/>

</div>
</form>
</body>

Use of the JS timer (example explained)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
php timer example xcode timer example use after free vulnerability explained jquery timer function example angular timer example parts of web address explained use node js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More