Home > Developer > JavaScript

SetTimeout () function in javascript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

 

 

We all know the role of the setTimeput () function in javascript. It is generally used to handle some continuous tasks. Let's look at an example first:

<Head>
<Script>
Function init ()
{
SetTimeout ("init2 ()", 0 );
Alert ("1 ");
}
Function init2 ()
{
Alert ("2 ");
}
</Script>
</Head>
<Body onload = "init ()">
</Body>

Maybe many people think the result is: 2 1, but the result is: 1 2. Why? When the delay time is set to 0, should we immediately execute init2? We can think that,The setTimeout () function will apply for a new stack space.But does not belong to the stack space of the current function init (), so init () first goes into the stack, alert ("1") 2nd goes into the stack, when init () after the function is executed, setTimeout () is executed.
 
Of course, parameter transfer is not involved here. Let's look at this example again:

<Head>
<Script>
Var rgbcolor = new Array (3 );
Var whichtr = 0;
Function changeColor (wh)
{
Whichtr = wh;
For (var I = 0; I <3; I ++)
{Rgbcolor [I] = Math. ceil (Math. random () * 255 );}
TrID [whichtr]. style. backgroundColor = "rgb (" + rgbcolor [0] + "," + rgbcolor [1] + "," + rgbcolor [2] + ")";
SetTimeout ("changeColor (" + whichtr + ")", 1000 );
}

</Script>
</Head> <body>
<Table border = "1" height = "400" width = "500" align = "center" cellspacing = "0">
<Tr onmousedown = "changeColor (0)" id = "trID"> <td> 0 </td> </tr>
<Tr onmousedown = "changeColor (1)" id = "trID"> <td> 1 </td> </tr>
<Tr onmousedown = "changeColor (2)" id = "trID"> <td> 2 </td> </tr>
</Table>
</Body>

 

When we click three rows in the table, the background color of the three rows is changed. here we will ask: When I click the first line, whichtr = wh = 0; when we click row 2nd, whichtr = wh = 1; at this time, the global variables of whichter have changed, but the color of the first line is still changing. After you click 3rd, the color of the first two lines is also changing. Why? The global variable has only one whichtr, but it is changed after we click it, but the color of the three rows keeps changing, what we expect is that only one row of color is changing after each click.
To better understand the changes of the global variable whichtr when running the program, we add the following code: document. body. innerHTML + = whichtr;
The script code is changed:

<Script>
Var rgbcolor = new Array (3 );
Var whichtr = 0;
Function changeColor (wh)
{
Whichtr = wh;
For (var I = 0; I <3; I ++)
{Rgbcolor [I] = Math. ceil (Math. random () * 255 );}
TrID [whichtr]. style. backgroundColor = "rgb (" + rgbcolor [0] + "," + rgbcolor [1] + "," + rgbcolor [2] + ")";
Document. body. innerHTML + = whichtr;
SetTimeout ("changeColor (" + whichtr + ")", 1000 );
}
</Script>

 
At this point, I click the three rows in the table, and the result is that the color on the three sides is changing the edge. The value of whichtr is 012012012012...
At this time, we can know that the global variables have changed and are constantly changing.
Why? The key issue is this code: setTimeout ("changeColor (" + whichtr + ")", 1000 );
We can analyze it like this:
When you click row 1st, the value of whichtr is 0. When the program runs to setTimeout ("changeColor (" + whichtr + ")", 1000, 0 is treated as the parameter of changeColor () function after Ms. as we already know, the setTimeout function will re-apply for a stack in the memory to save the function to run. Therefore, at this time, whichtr = 1 has been saved to another memory unit, but this is not the original whichtr. It can only be said to be a copy of whichtr. When the 1000MS time period is reached, the copy of whichtr = 1 will be passed to changeColor () as a parameter (), when whichtr = wh is executed, the value of the global variable whichtr is changed.
Each onmousedown event in the program generates a stack space. Each stack space has a changeColor () function, but the global variable whichtr is common and runs independently in each stack, but this is not multithreading. javascript is single-threaded. It can only be regarded as one simulated multithreading.

Summary:
When passing parameters, the setTimeout () function saves a copy of a parameter in the new stack where setTimeout () is located. When the time period ends, this copy is passed to the call function.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
function inside function in javascript add function in javascript explode function in javascript goto function in javascript include function in javascript php in javascript function splice function in javascript

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More