JS Timer (perform once, repeat execution) _javascript tips

Source: Internet
Author: User
Tags setinterval
1, only one timer is executed

Copy Code code as follows:

<script>
Timer asynchronous Run
function Hello () {
Alert ("Hello");
}
Using method names to execute methods
var T1 = window.settimeout (hello,1000);
var t2 = window.settimeout ("Hello ()", 3000);//Using String execution method
Window.cleartimeout (T1)//Remove Timer
</script>


2, repeated execution of the timer

Copy Code code as follows:

<script>
function Hello () {
Alert ("Hello");
}
Repeat a method
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 and are not actually executed sequentially, you can do so by referring to the following methods:
You can add a timer to the OnLoad method, set a timer, and then run it after a "delay" for a period of time to consider the order in which the page load is run.

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

1. Inverted 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, it can be a function, or it can be several functions, separated by ";" between functions. For example, to eject two warning windows, you can "function ()". Into
"Alert (' First warning window! '); Alert (' Second warning window! '); , and the second parameter "Delaytime" is the time of the interval, in milliseconds, that is, fill in "5000", which means 5 seconds.
The countdown timer is to trigger an event at a specified time, and the loop timer is a recurring event when the time interval arrives, the difference being that the former is only a function once and the latter is constantly acting.
For example, when you open a page, want to interval a few seconds to automatically jump to another page, you need to use the inverted timer "settimeout (" function (); ", Delaytime)", and if you want to set a sentence into a word of the appearance,
You need to use the loop timer "setinterval" ("function ();", Delaytime).

Gets the focus of the form, the document.activeElement.id is used. Use if to determine whether the ID of the document.activeElement.id and form is the same.
For example: if ("mid" = document.activeElement.id) {alert ();}, "Mid" is the corresponding ID of the form.

Timer:

Used to specify a program to be executed after a certain period of time.

JS in timed execution, settimeout and setinterval differences, and L lifting method

SetTimeout (Expression,delaytime), after Delaytime, will perform a expression,settimeout application after a period of delay, and then do some action.
SetTimeout ("function", time) sets a timeout object

SetInterval (Expression,delaytime), each delaytime, will perform expression. Can often be used to refresh an expression.
SetInterval ("function", time) sets a timeout object

SetInterval for automatic repetition, settimeout will not repeat.

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

Two examples are briefly cited.
Example 1. A verbatim output string when a form is triggered or loaded

Copy Code code 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; Time interval 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 in the input box, check the input box information periodically, and do not perform the check action when the focus is not.

Copy Code code 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; Time interval 5 Seconds
var c=0;
function Scroll () {
C + +;
if ("b" = = Document.activeElement.id) {
var str= "Regular check <b>" +c+ "</b> times <br/>";
if (document.getelementbyidx_x_x (' B '). value!= "") {
str+= the current content of the input box is <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 arrived after the pop-up warning window.

Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<script language= "JavaScript" >
function count () {
Document.getelementbyidx_x_x (' m '). Innerhtml= "The timer has begun!" ";
settimeout ("Alert" (' 10 seconds!) ') ", 10000)
}
</script>
<body>
<div id= "M" ></div>
<input type= "button" value= "timer start" onclick= "Count ()" >
</body>

Example 4: Countdown timer jump

Copy Code code 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 automatic jump ...
<meta http-equiv=refresh content=3;url= '/ds02.jsp '/>
<!--script starts-->
<script language= "javascript" type= "" >
function Countdown (secs) {
Tiao.innertext=secs;
if (--secs>0)
SetTimeout ("Countdown" ("+secs+") ", 1000);
}
Countdown (3);
</script>
<!--script End-->


Example 6:

Copy Code code as follows:

<meta http-equiv= "Refresh" content= "2;url= ' b.html '" >

Example 7:

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
settimeout ("window.location.href= ' b.html '", 2000);
The following two can be used
settimeout ("javascript:location.href= ' b.html '", 2000);
settimeout ("window.location= ' b.html '", 2000);
</script>

Example 8:

Copy Code code as follows:

<span id= "Totalsecond" >2</span>
<script language= "javascript" type= "Text/javascript" >
var second = document.getelementbyidx_x (' Totalsecond '). InnerHTML;
if (isNaN (second)) {
...... is not a digital processing method
}else{
SetInterval (function () {
document.getelementbyidx_x (' Totalsecond '). InnerHTML =--second;
if (second <= 0) {
window.location = ' b.html ';
}
}, 1000);
}
</script>

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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