Examples of JavaScript timer usage

There are two functions in JavaScript that can implement the functions of the "timer" settimeout and setinterval, the parameters of the two functions are the same, but the meaning of the representative is different. For example settimeout (' Test () ', 3000) means to perform the function test () (only once) after 3000 milliseconds, setinterval (' Test () ', 3000); Indicates that the test () function is executed once every 3000 milliseconds. One is to perform only once one is continuously executed. We write the following code:

The code is as follows	Copy Code
<script> function Test () { Alert (' 111 '); } SetInterval (' Test () ', 3000)//Every 3 seconds perform function test () </script>

Our execution will see that alert (' 111 ') is executed every 3 seconds, and will not stop if the following code is written:

The code is as follows	Copy Code
<script> function Test () { Alert (' 111 '); } settimeout (' Test () ', 3000); 3 seconds to execute once (only once) </script>

Run will find 3 seconds after the execution is not executed, this is the difference between the two, use which to see our specific requirements, in fact, can also make settimeout with setinterval the same functions, such as:

The code is as follows	Copy Code
<script> function Test () { Alert (' 111 '); settimeout (' Test () ', 3000);//Call inside function } settimeout (' Test () ', 3000); 3 seconds to execute once (only once) </script>

SetTimeout is executed within the function so that we can perform it once every 3 seconds. Also note that sometimes we need to manually stop execution, for example, we use the timer to achieve the image of the floating function (the coordinates of the picture at a certain time), when the mouse moved to the picture we need the timer "invalid", this How to achieve it? If you use setinterval that's fine, after performing setinterval, return a timer ID, and if you pass the ID to the function clearinterval, you can terminate the function that was called, for example:

The code is as follows

Copy Code

<div id= "Show" >0</div> <script> function Test () { var obj = document.getElementById (' show '); obj.innerhtml = parseint (obj.innerhtml) + 1; } function Start_add () { time_id = setinterval (' Test () ', 500);//Every 0.5 seconds perform function test () } </script> <input type= "button" value= "click Start to execute" onclick= "Start_add ();"/> <input type= "button" value= "Click to terminate the execution of" onclick= "Clearinterval (time_id);"/>

Using settimeout to realize setinterval function

The idea is very simple, that is, in a function called non-stop execution itself, a bit like recursion

The code is as follows	Copy Code
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:

The code is as follows

Copy Code

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:

The code is as follows	Copy Code
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 that it belongs to.