Examples of usage and differences between setInterval() and setTimeout()_Basic knowledge

1. setInterval() usage_learning

Copy code The code is as follows:

//Automatically execute the method every second
var c=0;
function showLogin()
{
alert(c );
}
//setInterval method or String, milliseconds, parameter array (method))
setInterval("showLogin()", "1000");

2.setTimeout

How to use setTimeout() in js class
setTimeout (expression, delay time)
setTimeout (expression, interaction time)
Delay time/interaction time is in milliseconds When executing setTimeout (1000ms=1s), it executes the expression once after delaying the specified time after loading, and only executes it once. When executing setTimeout, it executes the expression once every specified time after loading. Formula
1, basic usage:
Execute a piece of code:
var i=0;
setTimeout("i =1;alert(i)",1000);
Execute a function:
var i=0;
setTimeout(function(){i =1;alert(i);},1000);

//Pay attention to the difference between the two methods above.
Here is another execution function:

Copy code The code is as follows:

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

It can also be like this:
setTimeout(test,1000);
Summary:
The prototype of setTimeout is like this:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout has 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, do not 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, then its return value must be a function
2 , use setTimeout to implement the function of setInterval (automatically execute the function every period of time)
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;}
//Four methods are used to test 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 It is a separate function named 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 js parses The engine will not be confused about who this refers 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:
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....Code
return timer//Return a marker
}
So When this is passed to setTimeout(), of course it refers to the current object window to which it belongs.

Simple example:

Copy code The code is as follows:

My Heading 1

Click here!


<script> <br>var i=1; <br><br>function clickButton(){ <br>document.getElementById(" click").click(); <br>i ; <br><br>} <br>setInterval("clickButton()","1000"); <br>//setTimeout("clickButton()",1000 ); <br>//setTimeout(clickButton,1000); <br>function change(){ <br>if(i%2==1) <br>document.getElementById('id1').style.color= 'red'; <br>else <br>document.getElementById('id1').style.color='black'; <br><br>} <br><br></script>
< ;/html>