JavaScript often uses settimeout to postpone execution of a function, such as:
Copy Code code as follows:
settimeout (function () {alert ("Hello World");},1000);
A delay of 1 seconds after execution to this sentence pops up the alert window. So look at this paragraph again:
Copy Code code as follows:
function A () {
settimeout (function () {alert (1)}, 0);
Alert (2);
}
A ();
Note that the settimeout delay in this code is set to 0, which is a delay of 0 milliseconds, seemingly without any delay to execute immediately, i.e. 1, 2. But the actual implementation result is 2, 1. Why? This has to be said from the JavaScript call stack and the SetTimeout function.
First, JavaScript is single-threaded, which executes only one piece of code at a time, so each JavaScript code execution block "blocks" the execution of other asynchronous events. Second, like other programming languages, function calls in JavaScript are also implemented through stacks. When the function A is executed, a first enters the stack, and if alert (1) is not added settimeout, alert (1) 2nd into the stack, and finally alert (2). But now when alert (1) is added to the settimeout, alert (1) is added to a new stack to wait and execute as fast as possible. This is done as quickly as possible after the stack of a is finished, so the actual execution result is alert (2), and then alert (1). Here settimeout is actually leaving alert (1) out of the current function call stack. Look at one of the following examples:
Copy Code code as follows:
<input name= "Input" onkeydown= "alert (this.value)" type= "text" value= "a"/>
The purpose of such a function is to send all the characters in the current input characters alert with each character entered, but the actual effect is the contents of alert before the button. Here, we can use SetTimeout (0) to achieve.
Copy Code code as follows:
<input onkeydown= "Var me=this; settimeout (function () {alert (me.value)}, 0) "name=" input "type=" text "value=" a "/>
Thus, when the onkeydown event is triggered, alert is placed on the next call stack, which executes once the stack that is triggered by the onkeydown event is closed. Of course the browser also has a onkeyup event can also achieve our needs.
Such settimeout usages are often encountered in actual projects. For example, browsers will be smart to wait until the end of a function stack to change the DOM, if you set the page background from white to red and then back to white in this function stack, the browser will think that the DOM has not changed and ignore the two sentences, so we can "set back to White" by settimeout. function to join the next stack, you can ensure that the background color has changed (although the speed may soon be undetectable).
In summary, settimeout increases the flexibility of JavaScript function calls, and provides a great convenience for scheduling functions to perform sequentially.
