The difference between JavaScript settimeout and setinterval timings _javascript tips

Source: Internet
Author: User
Tags setinterval time interval javascript settimeout

The SetTimeout method is the timer program, which is what to do after the time. Just finish it.
The SetInterval method is to indicate that an operation is repeated at a certain time interval.
If you implement the function of Setinerval with settimeout, you need to call yourself in the program you are executing. If you want to clear the counter you need to invoke different cleanup methods depending on the method you are using:
For example: (1):

Copy Code code as follows:

T=settimeout (' Northsnow () ', 1000);
Cleartimeout (t);
(2):
T=setinterval (' Northsnow () ', 1000);
Clearinteval (t);
SetTimeout ()

Grammar
Copy Code code as follows:

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

The first parameter is a string containing a JavaScript statement. 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.

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

Copy Code code as follows:

<script type= "Text/javascript" >
function Timedmsg () {
var t=settimeout ("Alert (' 5 seconds! ')", 5000);
}
</script>
<body>
<form>
<input type= "button" value= "Run timed!" onclick= "timedmsg ()" >
</form>
</body>

SetInterval ()
The SetInterval () method can call a function or a calculation expression in the specified period (in milliseconds).
The SetInterval () method keeps calling the function until the clearinterval () is called or the window is closed. The ID value returned by SetInterval () can be used as an argument to the Clearinterval () method.
Grammar
SetInterval (code,millisec[, "Lang"])
Instance
Copy Code code as follows:

<meta charset= "Utf-8"/>
<title>setinterval Case-New studio </title>
<body>
<script language= "JavaScript" >
Function Endo () {
Alert ("Hello");
}
Window.setinterval (' Endo () ', 5000);
</script>
</form>
<p> (c) endige.net </p>
</body>

Method of parameter transfer
Whether it's window.settimeout or window.setinterval, you can't take arguments with the function name as the calling handle, and you have to take parameters on many occasions, which requires a workaround. For example, for the function Hello (_name), it is used to display Huanhuan for the user name
Welcome information:
Copy Code code as follows:

var username= "Jack";
Show welcome information based on user name
function Hello (_name) {
Alert ("Hello," +_name);
}

At this point, it is not feasible to use the following statement to delay execution of the Hello function by 3 seconds:
Window.settimeout (Hello (userName), 3000);
This will cause the Hello function to execute immediately and pass the return value as the call handle to the SetTimeout function, and the result is not required by the program. You can achieve the desired result by using a string form:
The string here is a piece of JavaScript code, where the username represents the variable. But this kind of writing is not intuitive, and some occasions must use the function name, the following with a small trick to implement the call with a parameter function:
Copy Code code as follows:

<script language= "JavaScript" type= "Text/javascript" >
<!--
var username= "Jack";
Show welcome information based on user name
function Hello (_name) {
Alert ("Hello," +_name);
}
Creates a function that returns a parameterless function
function _hello (_name) {
return function () {
Hello (_name);
}
}
Window.settimeout (_hello (userName), 3000);
-->
</script>

This defines a function _hello, which receives a parameter and returns a function with no parameters.
The parameters of the external function are used inside this function to invoke them, and no arguments need to be used. In the Window.settimeout function, use _hello (UserName) to return an argument-less
function handle, which realizes the function of parameter passing.
A. When a parameter is not required in the method to be executed
Copy Code code as follows:

<script type= "Text/javascript" >
Loop execution, execute once every 3 seconds Showalert ()
Window.setinterval (Showalert, 3000);
function Showalert () {
Alert ("Hello");
}
Scheduled execution, 5 seconds to execute show ()
Window.settimeout (show,5000);
Function Show () {
Alert ("Hello");
}
</script>

B. When parameters are required in the method to be executed
Copy Code code as follows:

<script type= "Text/javascript" >
Loop execution, execute once every 3 seconds Showalert ()
Window.setinterval (function () {
Showalert ("Hello!") ”);
}, 3000);
function Showalert (mess) {
alert (mess);
}
Timed execution, 5 seconds to execute Showalert ()
Window.settimeout (function () {
Showalert ("Hello");
},5000);
</script>

Related Article

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.