JavaScript window.settimeout () Detailed Usage _ Basics

JS SetTimeout method is more useful, usually used in the page refresh, delay execution, and so on. But many JavaScript novices are still not very familiar with the usage of settimeout. Although I have studied and applied JavaScript for more than two years, I sometimes have to consult the SetTimeout method. Today, the SetTimeout method of JS to do a systematic summary.

The difference between setinterval and settimeout
Said SetTimeout, it is easy to think of SetInterval, because these two usages are similar, but there are differences, today together summed up!

SetTimeout
Definition and Usage: the settimeout () method is used to call a function or evaluate an expression after a specified number of milliseconds.

Syntax: settimeout (CODE,MILLISEC)

Parameters: Code (required): The JavaScript code string to execute after the function to be invoked.　 Millisec (required): The number of milliseconds to wait before executing code. Tip: settimeout () executes only one code at a time. If you want to call more than once, use SetInterval () or let code itself call SetTimeout () again.

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.

Syntax: SetInterval (code,millisec[, "Lang"])

Parameter: Code required. The function to invoke or the code string to execute. Millisec must. The time interval, in milliseconds, between the periodic execution or invocation of code.

Return value: A value that can be passed to Window.clearinterval () to cancel the periodic execution of code.

Difference
As you can see from the above, the main differences between SetTimeout and SetInterval are:

SetTimeout only run once, that is to say, set the time to trigger the run of the specified code, after the end of the run. If you run the same settimeout command again in the code you run, you can run it in a loop. (that is, to be cycled, the function itself calls settimeout () again)

The setinterval is a circular operation that triggers the specified code at each set interval. This is the real timer.

SetInterval use simple, and settimeout is more flexible, you can exit the cycle at any time, and can be set to run at irregular intervals, such as the first 1 seconds, the second 2 seconds, the third 3 seconds.

Personally, I prefer to use settimeout more!

The use of settimeout
Let's run a case together, first open Notepad, put the following code into, run the effect!

<! DOCTYPE html>
 
 

The page will pop up on the frame after three seconds. This case applies the settimeout most basic syntax, settimeout does not automatically repeat execution!

SetTimeout can also perform function, and can be repeatedly executed! Let's do one more case:

<! DOCTYPE html>
 
 

You can see the number in the input text box incrementing in one second! So, settimeout can also make the time beat in the webpage!

No case, not very fast learning, we come together to do an example, calculate your haorooms a page in the time:

 <! DOCTYPE html>  
 

How, through the above example, to the use of settimeout (), I believe you know it!

Cleartimeout ()
Let's take a look at cleartimeout (),

Cleartimout () has the following syntax:

Cleartimeout (Timeoutid)

To use Cleartimeout (), we set the settimeout (), to give this settimout () a name, this name is Timeoutid, when we stop, is to use this timeoutid to call a halt, this is a custom A literal name, but many people are named after Timeoutid.

In the following example, set two Timeoutid, named Meter1 and Meter2 respectively, as follows:

Timeoutid↓meter1 = settimeout ("Count1 ()", 1000) Meter2 = settimeout ("Count2 ()", 1000)

Using this meter1 and meter2 these timeoutid names, when setting cleartimeout (), you can specify which settimeout () is valid and will not interfere with another settimeout () operation.

Below please see the case of cleartimeout ()

<! DOCTYPE html>  

End
Through the above explanation, do not know you to settimeout understand not, next time use settimeout will be very skilled? Will settimeout and setinterval get mixed up again? If you have what do not understand the place, can communicate with each other, improve together, thank you!

settimeout (expression, delay time)
settimeout (expression, interaction time)
The delay time/interaction time is in Hao seconds (1000ms=1s) settimeout at execution time, after a specified time delay after loading, execute an expression once
SetTimeout at execution time, it executes an expression at a specified time, after it has been loaded

1, Basic usage:
Execute a piece of code:

Copy Code code as follows:

var i=0;
SetTimeout ("I+=1;alert (i)", 1000);

To perform a function:

Copy Code code as follows:

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:

Copy Code code as follows:

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, realize the function of setinterval with settimeout
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:

Copy Code code as follows:

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.