Differences between javascript setTimeout and setInterval timing

Source: Internet
Author: User
Tags javascript settimeout

The setTimeout method is a Timer Program, that is, after what time. After the job is finished, pull it down.
The setInterval method indicates that an operation is executed repeatedly at a certain interval.
If you use setTimeout to implement the setInerval function, you need to regularly call yourself in the executed program. To clear a counter, you need to call different clearing methods based on the method used:
Example: (1 ):
Copy codeThe Code is as follows:
T = setTimeout ('northsnow () ', 1000 );
ClearTimeout (t );
(2 ):
T = setInterval ('northsnow () ', 1000 );
ClearInteval (t );
SetTimeout ()

Syntax
Copy codeThe Code is as follows:
Var t = setTimeout ("javascript statement", millisecond );

The first parameter is a string containing a JavaScript statement. This statement may be like "alert ('5 seconds! ') ", Or call a function, such as alertMsg ()".
The second parameter indicates how many milliseconds since the current time the first parameter will be executed.
Tip: 1000 milliseconds equals one second.

Instance
When the button in the following example is clicked, a prompt box will pop up in five seconds.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript">
Function timedMsg (){
Var t = setTimeout ("alert ('5 seconds! ') ", 5000 );
}
</Script>
</Head>
<Body>
<Form>
<Input type = "button" value = "running time! "OnClick =" timedMsg () ">
</Form>
</Body>
</Html>
 
SetInterval ()
The setInterval () method can call functions or computation expressions according to the specified period (in milliseconds.
The setInterval () method does not stop calling the function until clearInterval () is called or the window is closed. The ID value returned by setInterval () can be used as a parameter of the clearInterval () method.
Syntax
SetInterval (code, millisec [, "lang"])
Instance
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> setInterval instance-cutting studio </title>
</Head>
<Body>
<Script language = "javascript">
Function endo (){
Alert ("hello ");
}
Window. setInterval ('endo () ', 5000 );
</Script>
</Form>
<P> (c) Endige.net </p>
</Body>
</Html>

Parameter passing Method
Whether it is window. setTimeout or window. setInterval, parameters cannot be included when using the function name as the call handle. In many cases, parameters must be included, which requires a solution. For example, for the hello (_ name) function
Welcome information:
Copy codeThe Code is as follows:
Var userName = "jack ";
// Display the welcome information based on the user name
Function hello (_ name ){
Alert ("hello," + _ name );
}

At this time, if you attempt to use the following statement to delay the hello function execution by 3 seconds, it is not feasible:
Window. setTimeout (hello (userName), 3000 );
This will enable the hello function to be executed immediately and pass the returned value to the setTimeout function as the call handle. The result is not required by the program. You can use a string to achieve the desired result:
The string here is a piece of JavaScript code, where userName represents a variable. However, this method is not intuitive enough, and function names must be used in some cases. Here is a tips to call a function with parameters:
Copy codeThe Code is as follows:
<Script language = "JavaScript" type = "text/javascript">
<! --
Var userName = "jack ";
// Display the welcome information based on the user name
Function hello (_ name ){
Alert ("hello," + _ name );
}
// Create a function to return a non-Parameter Function
Function _ hello (_ name ){
Return function (){
Hello (_ name );
}
}
Window. setTimeout (_ hello (userName), 3000 );
// -->
</Script>

A function _ hello is defined here to receive a parameter and return a function without a parameter,
The external function parameters are used inside the function to call the function. No parameters are required. In the window. setTimeout function, _ hello (userName) is used to return
Function handle to implement the parameter transfer function.
A. When parameters are not required in the method to be executed
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Execute cyclically, and execute showalert () every three seconds ()
Window. setInterval (showalert, 3000 );
Function showalert (){
Alert ("hello ");
}
// Scheduled execution. Execute show () in 5 seconds ()
Window. setTimeout (show, 5000 );
Function show (){
Alert ("Hello ");
}
</Script>

B. When parameters are required in the method to be executed
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Execute cyclically, and execute showalert () every three seconds ()
Window. setInterval (function (){
Showalert ("Hello !");
},3000 );
Function showalert (mess ){
Alert (mess );
}
// Scheduled, showalert () in 5 seconds ()
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.