JavaScript Timer Event Use details

JavaScript Timer Event Use details _ basics

Last Update:2017-01-19 Source: Internet

Author: User

Tags setinterval

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

It is easy to use timing events in JAVASCRITP, and two key methods are:

SetTimeout ()
Code to execute at some point in the future

Cleartimeout ()
Cancel settimeout ()
SetTimeout ()
Grammar

Copy Code code as follows:

var t=settimeout ("javascript statement", MS)

The settimeout () method returns a value. In the above statement, the value is stored in a variable named T. If you want to cancel this settimeout (), you can use the variable name to specify it.
The first parameter of settimeout () is a string containing JavaScript statements. This statement may be such as "alert (' 5 seconds! ')", or a call to a function, such as alertmsg ().

The second parameter indicates how many milliseconds from the current to execute the first argument.

Tip: 1000 milliseconds equals one second.

When the button in the following example is clicked, a cue box pops up after 5 seconds.

Copy Code code as follows:

Instance- Infinite loop

To create a timer that runs in an infinite loop, we need to write a function to call itself. In the following example, when the button is clicked, the input field starts counting from 0.

Copy Code code as follows:

cleartimeout ()

Grammar

Copy Code code as follows:

Cleartimeout (settimeout_variable)

Instance

The following example is similar to the example of an infinite loop above. The only difference is that now we have added a "Stop count!" button to stop this counter:

Copy Code code as follows:

function Timedcount ()
{
document.getElementById (' txt '). value=c
C=c+1
T=settimeout ("Timedcount ()", 1000)
}

function Stopcount ()
{
Cleartimeout (t)
}
</script>

Two other important methods are:

Copy Code code as follows:

SetInterval ()
SetInterval ()-Executes a function, over and over again, in specified time intervals

The function is to cycle through a method, within a specified interval of time

Grammar:

Copy Code code as follows:

Window.setinterval ("JavaScript function", milliseconds);

Description: The first parameter must be a function, and the second parameter is the interval between the execution of the function.

Instance:

Copy Code code as follows:

Description: The above example, the implementation effect is that every 500ms on alert ("Hello");

One more clock:

Copy Code code as follows:

<body>
<p id= "Demo" ></p>
<script type= "Text/javascript" >
SetInterval (function () {MyTimer ()},1000);
function MyTimer () {
var d = new Date ();
var t=d.tolocaletimestring ();
document.getElementById (' demo '). innerhtml=t;
}
</script>
</body>

How to Stop, SetInterval () method??

Copy Code code as follows:

Window.clearinterval ()

Grammar:

Copy Code code as follows:

Window.clearinterval (intervalvariable)

Copy Code code as follows:

The Window.clearinterval () method can be written without the window prefix.

To is able to use the Clearinterval () method, you must use a global variable when creating the interval method:

Myvar=setinterval ("JavaScript function", milliseconds);
Then you are able to stop the execution by calling the Clearinterval () method.

Instance:

Copy Code code as follows:

<body>
<p id= "Demo" ></p>
<p id= "Demo2" onclick= "Stop ()" >stop</p>
<script type= "Text/javascript" >
var temp=setinterval (function () {MyTimer ()},1000);
function MyTimer () {
var d = new Date ();
var t=d.tolocaletimestring ();
document.getElementById (' demo '). innerhtml=t;
}
function Stop () {
<body>
<p id= "Demo" ></p>
<p id= "Demo2" onclick= "Stop ()" >stop</p>
<script type= "Text/javascript" >
var temp=setinterval (function () {MyTimer ()},1000);
function MyTimer () {
var d = new Date ();
var t=d.tolocaletimestring ();
document.getElementById (' demo '). innerhtml=t;
}
function Stop () {
Clearinterval (temp);
}
</script>
</body>

}
</script>
</body>

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.

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