Examples of the use and distinction of setInterval of and setTimeout of
- 2020-03-29 23:49:26
- OfStack
1. SetInterval () usage _ learning
2. The setTimeout
SetTimeout () in the js class
SetTimeout (expression, delay time)
SetTimeout (expression, interaction time)
The delay time/interaction time is measured in seconds (1000ms=1s). SetTimeout is to execute the expression once after the specified time delay after the load
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);
// notice the difference between the two methods above.
Here's another one that performs the function:
Or:
SetTimeout (test, 1000);
Conclusion:
The prototype for setTimeout looks like this:
ITimerID = window.setTimeout(vCode, imillisecunits [, sLanguage])
SetTimeout comes in two forms
SetTimeout (code, the interval)
SetTimeout (func, interval, args)
Where code is a string
Func is a function.
Notice that "function" is an expression, not a statement.
Let's say you want to periodically execute a function
Function a () {
/ /...
}
Can be written as
SetTimeout (" (a) ", 1000)
or
SetTimeout (1000). A,
And notice that in the second form, it's a, not a(), remember!!
To expand it out, no matter what you write here, if it's a variable, it's a variable that points to a function; If it's a function, then its return value has to be a function
2. Implement setInterval function with setTimeout (automatically execute function at regular intervals)
The idea is very simple, is to call in a function and execute itself over and over again, kind of like recursion
3, use setTimeout in the class
Finally to the topic, in fact, in the use of the class you encounter problems are about this, as long as the solution of this problem will be all right.
Ha ha. Let's analyze it:
Error analysis:
A: "this" actually refers to the window object, not the current instance object
Count () and count in B: and C: actually refer to a separate function called 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 doesn't confuse who this refers to.
On the other hand, although we know that this in setTimeout("this.count()",1000) refers to the window object, we still don't understand why it is
Window object ^_^(a little dizzy...)
So we can imagine how this setTimeout is defined:
SetTimeout is a method of window. The full name is window.settimeout ()
That should be defined as:
Window. The setTimeout = function (vCode iMilliSeconds [, sLanguage]) {
/ /... code
Return timer// returns a token
}
So when you pass this to setTimeout(), of course, you're referring to the window of the current object to which it belongs.
Simple example:
//Automatically executes the method every second
var c=0;
function showLogin()
{
alert(c++);
}
//SetInterval method or string, milliseconds, parameter array (of methods)
setInterval("showLogin()","1000");
2. The setTimeout
SetTimeout () in the js class
SetTimeout (expression, delay time)
SetTimeout (expression, interaction time)
The delay time/interaction time is measured in seconds (1000ms=1s). SetTimeout is to execute the expression once after the specified time delay after the load
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);
// notice the difference between the two methods above.
Here's another one that performs the function:
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);
Or:
SetTimeout (test, 1000);
Conclusion:
The prototype for setTimeout looks like this:
ITimerID = window.setTimeout(vCode, imillisecunits [, sLanguage])
SetTimeout comes in two forms
SetTimeout (code, the interval)
SetTimeout (func, interval, args)
Where code is a string
Func is a function.
Notice that "function" is an expression, not a statement.
Let's say you want to periodically execute a function
Function a () {
/ /...
}
Can be written as
SetTimeout (" (a) ", 1000)
or
SetTimeout (1000). A,
And notice that in the second form, it's a, not a(), remember!!
To expand it out, no matter what you write here, if it's a variable, it's a variable that points to a function; If it's a function, then its return value has to be a function
2. Implement setInterval function with setTimeout (automatically execute function at regular intervals)
The idea is very simple, is to call in a function and execute itself over and over again, kind of like recursion
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()",1000);
//You can use this as well
//setTimeout(xilou,1000);
}
3, use setTimeout in the class
Finally to the topic, in fact, in the use of the class you encounter problems are about this, as long as the solution of this problem will be all right.
Ha ha. Let's analyze it:
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;}
//Here are four ways to test it, one at a time.
setTimeout("this.count()",1000);//A: an error occurs when the next 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: 'count' undefined
//Here is the fourth
var self=this;
setTimeout(function(){self.count();},1000);//D: correct
}
var x=new xilou();
x.count();
Error analysis:
A: "this" actually refers to the window object, not the current instance object
Count () and count in B: and C: actually refer to a separate function called 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 doesn't confuse who this refers to.
On the other hand, although we know that this in setTimeout("this.count()",1000) refers to the window object, we still don't understand why it is
Window object ^_^(a little dizzy...)
So we can imagine how this setTimeout is defined:
SetTimeout is a method of window. The full name is window.settimeout ()
That should be defined as:
Window. The setTimeout = function (vCode iMilliSeconds [, sLanguage]) {
/ /... code
Return timer// returns a token
}
So when you pass this to setTimeout(), of course, you're referring to the window of the current object to which it belongs.
Simple example:
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button" id="click" onClick="change()">
Click here! </button>
</body>
<script>
var i=1;
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>
</html>