Summary of settimeout usage in JS

Source: Internet
Author: User

SetTimeout() Method is used to call a function or computing expression after a specified number of milliseconds. The following describes how to use setTimeout () in the js class:

SetTimeout (expression, latency)

SetTimeout (expression, interaction time)

The delay time/interaction time is in the unit of luxury seconds (1000 ms = 1 s)

When setTimeout is executed, it is executed once after the specified delay after loading, and only once

When setTimeout is executed, it executes the expression once every specified time after loading.

1. Basic usage:

Run a piece of code:

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

Execute a function:

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

Note: compare the two methods above.

Next, let's execute another function:

  1. var i=0;  
  2. function test(){  
  3. i+=1;  
  4. alert(i);  
  5. }  
  6. setTimeout("test()",1000);  

You can also do this:

  1. setTimeout(test,1000);  


The prototype of setTimeout is as follows:

  1. iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])  

SetTimeout has two forms:

  1. setTimeout(code,interval)   
  2. setTimeout(func,interval,args)  

Code is a string and func is a function. Note that the meaning of "function" is an expression rather than a statement. For example, if you want to periodically execute a function, you can write it as follows:

  1. function a()  
  2. {  
  3. //...  
  4. }  
  5. setTimeout("a()",1000) 


  1. setTimeout(a,1000)  

Note that the second form is a. Do not write it as a (). Remember !!!

Expand, no matter what you write here, if it is a variable, it must be a variable pointing to a function; if it is a function, then its return value is a function.

2. use setTimeout to implement the setInterval function. The idea is very simple, that is, to call a function without stopping itself, a little like recursion.

  1. Var I = 0;
  2. Function xilou (){
  3. I + = 1;
  4. If (I> 10) {alert (I); return ;}
  5. SetTimeout ("xilou ()", 1000 );
  6. // You can also use this
  7. // SetTimeout (xilou, 1000 );
  8. }

3. use setTimeout in the class

Finally, the question is true. In fact, all the problems encountered in the class are about this. As long as this problem is solved, everything will be done. Haha. Let's analyze:

  1. Function xilou (){
  2. This. name = "xilou ";
  3. This. sex = "male ";
  4. This. num = 0;
  5. }
  6. Xilou. prototype. count = function (){
  7. This. num + = 1;
  8. Alert (this. num );
  9. If (this. num> 10) {return ;}
  10. // Perform the test in four ways, one by one.
  11. SetTimeout ("this. count ()", 1000); // A: an error occurs when calling x. count (): the object does not support this attribute or method.
  12. SetTimeout ("count ()", 1000); // B: Error display: an object is missing
  13. SetTimeout (count, 1000); // C: error message: 'Count' undefined
  14. // The fourth type is shown below.
  15. Var self = this;
  16. SetTimeout (function () {self. count () ;}, 1000); // D: Correct
  17. }
  18. Var x = new xilou ();
  19. 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 named count (), but it can also be window. count (), because window. count () can be omitted as count ()

D: Direct the variable self to the current instance object, so that the js parsing engine will not confuse who this refers.

Even though we know that setTimeout ("this. this in count () ", 1000) refers to the window object, but I still don't understand why it is the window object ^_^ (a little dizzy ...), then we can imagine how this setTimeout is defined: setTimeout is a method of window, the full name is like this: window. setTimeout (), which should be defined as follows:

  1. Window. setTimeout = function (vCode, iMilliSeconds [, sLanguage]) {
  2. // ...... Code
  3. Return timer // return a token
  4. }

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.