Home > Web Front-end > JS Tutorial > Detailed usage of JavaScript window.setTimeout()_Basic knowledge

Detailed usage of JavaScript window.setTimeout()_Basic knowledge

WBOY
Release: 2016-05-16 18:42:41
Original
2344 people have browsed it

setTimeout (expression, delay time)
setTimeout (expression, interaction time)
Delay time/interaction time is in milliseconds (1000ms=1s) setTimeout is loading during execution After delaying the specified time, execute the expression once, only once
setTimeout When executing, it will execute the expression

1 every specified time since loading. Basic usage:
Execute a piece of code:

Copy code The code is as follows:

var i=0;
setTimeout("i =1;alert(i)",1000);

Execute a function:
Copy code The code is as follows:

var i=0;
setTimeout(function(){i =1;alert(i);},1000);

//Pay attention to the differences between the two methods above.

Here is another execution function:
Copy the code The code is as follows:

var i=0;
function test(){
i =1;
alert(i);
}
setTimeout("test()",1000);

can also be like this:
Copy code The code is as follows:

setTimeout( test,1000);

Summary:
The prototype of setTimeout is like this:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout There are two forms

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.
For example, if you want to execute a function periodically
function a(){
//...
}
can be written as
setTimeout("a()",1000)
or
setTimeout(a,1000)

Note here that in the second form, it is a, Don’t write it as a(), remember!!!
To expand, no matter what you write here, if it is a variable, it must be a variable pointing to a certain function; if it is a function, its return value must be It is a function

2. Use setTimeout to implement the function of setInterval
The idea is very simple, that is, calling a function in a function to continuously execute itself, a bit like recursion
Copy code The code is as follows:

var i=0;
function xilou(){
i =1;
if( i>10){alert(i);return;}
setTimeout("xilou()",1000);
//You can also use this
//setTimeout(xilou,1000);
}

3. Use setTimeout in a class
Finally we have come to the point. In fact, the problems that everyone encounters when using it in a class are all about this. As long as this problem of this is solved, Nothing to worry about.
Haha. Let’s analyze it:
Copy code The code is 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;}
//Test using four methods below, one by one in turn .
setTimeout("this.count()",1000);//A: An error occurs when the following x.count() is called: The object does not support this property or method.
setTimeout("count()",1000);//B: Error display: Missing object
setTimeout(count,1000);//C: Error display: 'count' is not defined
// The following is the fourth type
var self=this;
setTimeout(function(){self.count();},1000);//D: Correct

}

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

Error analysis:
This in A: actually refers to the window object, not the current instance object
The count() and count in B: and C: actually refer to a separate object named The function of count(), but it can also be window.count(), because window.count() can be omitted as count()
D: Point the variable self to the current instance object so that the js parsing engine will not be confused. Who does this refer to?

Having said that, although we know that this in setTimeout("this.count()",1000) refers to the window object, we still don’t understand why it is the
window object^_^ (a bit Dizzy...)
Then we can imagine how this setTimeout is defined:
setTimeout is a method of window, the full name is like this: window.setTimeout()
That should be defined like this of:
Copy code The code is as follows:

window.setTimeout=function(vCode, iMilliSeconds [ , sLanguage]){
//....Code
return timer//Returns a marker
}

So when this is passed to setTimeout() time, of course, refers to the current object window to which it belongs.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template