1. SetInterval () usage _ learning
//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>