SetTimeout is often used in Javascript to delay the execution of a function. After this sentence is executed, the alert window pops up with a delay of 1 second. Next, we will introduce the usage of the JavaScript call stack and setTimeout, if you are interested, do not miss it. In Javascript, setTimeout is often used to postpone the execution of a function, for example:
The Code is as follows:
SetTimeout (function () {alert ("Hello World") ;},1000 );
The alert window will pop up one second after this sentence is executed. Let's look at this section again:
The Code is as follows:
Function (){
SetTimeout (function () {alert (1)}, 0 );
Alert (2 );
}
A ();
Note that the setTimeout delay in this code is set to 0, that is, the delay is 0 milliseconds. It seems that the execution is done immediately without any delay, that is, 1 or 2. However, the actual execution result is 2, 1. Why? This should start with the Javascript call stack and setTimeout functions.
First, JavaScript is single-threaded, that is, only one code is executed at a time, so every JavaScript code execution block will "Block" the execution of other asynchronous events. Second, like other programming languages, function calls in Javascript are also implemented through stacks. When executing function a, a first enters the stack. If setTimeout is not added to alert (1), then alert (1) adds 2nd to the stack, and then alert (2 ). But now, after setTimeout is added to alert (1), alert (1) is added to a new stack for waiting and "as fast as possible" execution. This is as fast as possible, that is, it is executed immediately after a's stack is complete. Therefore, the actual execution result is first alert (2), then alert (1 ). SetTimeout actually disconnects alert (1) from the current function call stack. Let's look at the following example:
The Code is as follows:
In this way, the purpose of a function is to generate alert for all the characters in the current input every time one character is entered, but the actual effect is indeed the content before alert presses the key. Here, we can use setTimeout (0.
The Code is as follows:
In this way, when the onkeydown event is triggered, alert is placed in the next call stack. Once the stack triggered by the onkeydown event is closed, it is executed. Of course, the browser also has an onkeyup event to meet our needs.
This setTimeout is often used in actual projects. For example, the browser will intelligently wait until the end of a function stack to change the DOM. If the page background in the function stack is set from white to red and then back to white, the browser will think that the DOM has not changed and ignore these two sentences. Therefore, we can add the "set back to White" function to the next stack through setTimeout, then we can ensure that the background color has changed (although the speed may not be noticed soon ).
In short, setTimeout increases the flexibility of Javascript function calling and greatly facilitates the scheduling of function execution sequence.
