SetInterval () and settimeout () Examples of usage and differentiation _ basics

Source: Internet
Author: User
Tags setinterval
1. SetInterval () Use _ Learning
Copy Code code as follows:

Automatic execution every second of a method
var c=0;
function Showlogin ()
{
Alert (c + +);
}
SetInterval method or string, milliseconds, array of arguments (method))
SetInterval ("Showlogin ()", "1000");

2.setTimeout

SetTimeout () method of use in JS class
settimeout (expression, delay time)
settimeout (expression, interaction time)
The delay time/interaction time is in Hao seconds (1000ms=1s) settimeout at execution time, after the specified time, after loading, to execute the expression once, only once settimeout at execution time, it executes an expression at a specified time after it is loaded
1, Basic usage:
Execute a piece of code:
var i=0;
SetTimeout ("I+=1;alert (i)", 1000);
To perform a function:
var i=0;
settimeout (function () {I+=1;alert (i);},1000);

Note the difference between the two methods above.
Here's another executive function:
Copy Code code as follows:

var i=0;
function Test () {
I+=1;
alert (i);
}
settimeout ("Test ()", 1000);

You can also do this:
SetTimeout (test,1000);
Summarize:
The prototype of settimeout is this:
Itimerid = Window.settimeout (Vcode, Imilliseconds [, Slanguage])

There are two forms of settimeout
SetTimeout (Code,interval)
SetTimeout (Func,interval,args)
Where code is a string
Func is a function.
Note that the meaning of "function" is an expression, not a statement.
Like you want to perform a function periodically
function A () {
//...
}
can be written as
SetTimeout ("A ()", 1000)
Or
SetTimeout (a,1000)
Note that in the second form, it is a, do not write a (), remember!!!
Unfold, no matter what you write here, if it is a variable, it must be a variable that points to a function, and if it is a function, its return value will be a function.
2, using settimeout to implement the function of setinterval (automatically perform function every time)
The idea is very simple, that is, in a function called non-stop execution itself, a bit like recursion
Copy Code code as follows:

var i=0;
function Xilou () {
I+=1;
if (i>10) {alert (i); return;}
SetTimeout ("Xilou ()", 1000);
You can use this, too.
SetTimeout (xilou,1000);
}

3, using settimeout in the class
Finally to the point, in fact, the use of the class in the problem is all about this, as long as the solution to this question on everything is no worries.
Oh. Let's analyze:
Copy Code code as follows:

function Xilou () {
This.name= "Xilou";
this.sex= "Male";
this.num=0;
}
Xilou.prototype.count=function () {
This.num+=1;
alert (this.num);
if (this.num>10) {return;}
The following four methods of testing, one by one rotation test.
SetTimeout ("This.count ()", 1000)//a: An error occurs when the following X.count () Call: The object does not support this property or method.
SetTimeout ("Count ()", 1000);//b: Error display: Missing object
SetTimeout (count,1000);//c: Error display: ' Count ' not defined
Here's the fourth kind.
var self=this;
settimeout (function () {self.count ();},1000);//d: Correct

}

var x=new xilou ();
X.count ();

Error Analysis:
A: This in fact refers to the Window object and does not refer to the current instance object
The count () and Count in C: In fact refer to a separate function named Count (), but can also be window.count (), because Window.count () can be omitted to count ()
D: Point the variable self to the current instance object, so that the JS parsing engine does not mix the "who" it refers to.

In other words, although we know that settimeout ("This.count ()", 1000) refers to the Window object, it still doesn't understand why it is
Window Object ^_^ (a bit dizzy ...)
Then we can imagine how this settimeout is defined:
SetTimeout is a method of window, the full name is this: Window.settimeout ()
That should be defined as this:
Window.settimeout=function (Vcode, Imilliseconds [, Slanguage]) {
//..... Code
Return timer//Returns a marker
}
So when you pass this to settimeout (), of course, it refers to the current object window to which it belongs.

Simple example:
Copy Code code as follows:

<! DOCTYPE html>

<body>

<bu Tton type= "button" id= "click" onclick= "Change ()" >
Click here! </button>

</body>
<script>
var i=1; The

Function Clickbutton () {
document.getElementById ("click"). Click ();
i++;

}
SetInterval ("Clickbutton ()", "1000");
//settimeout ("Clickbutton ()", 1000);
//settimeout (clickbutton,1000);
Function Change () {
if (i%2==1)
document.getElementById (' id1 '). style.color= ' Red ';
Else
document.getElementById (' id1 '). style.color= ' Black ';

}

</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.