This section uses the principle of the first argument for you on the topic.
First, the introduction of title
We look at a topic now!
console.log(1);
setTimeout(()=>{
console.log(2)
},0);
console.log(3)What do you think the order is printed above it? If you do not know JS operational mechanism, then you get it wrong. In fact, it printed above is 132, is not it strange? Why is this? I believe the junior partner now there have been more than 1,000 questions, do not worry, listen to me slowly break it.
Second, what single-threaded? Why JS use single-threaded?
Single-threaded in plain English is that you same time you can only do one thing . JavaScript is single-threaded, and its related purposes. The main purpose of JavaScript is interaction with the user, as well as operating DOM. This determines that it can only be a single-threaded, otherwise it will bring a very complex synchronization problems. To say, when you update while you click Delete, it is impossible. Single-threaded means, all tasks need to line up, before the end of a mission, will perform a post-task. If a task takes a long time ago, a task after it had been waiting for .
Third, the task of understanding the queue (message queue)
JavaScript language designers aware of the problem, all tasks will be divided into two types, one is the synchronization tasks (synchronous), the other is the asynchronous task (Asynchronous) . Synchronization task means that queued for execution on the main thread task, only the first task is finished to a task after execution; asynchronous tasks mean, do not enter the main thread, and enter the "Task Queue" (task queue) of tasks, only "task queue" notify the main thread, an asynchronous tasks can be carried out, the task will enter the main thread. See the following two examples, like this more intuitive.
What is this code is printed below:
console.log(1)
while(true){
}
console.log(2)Answer: 1. Because while the task is synchronized
Let's look at what is printed below:
console.log(1)
setTimeout(()=>{
console.log(2)
})
while(true){
}Answer: 1, in accordance with the principle of a single thread to perform synchronization tasks, and then perform asynchronous tasks, while the synchronization task, setTimeout is asynchronous tasks.
Fourth, understand the Event Loop
First we look at an example:
for (var i = 0; i < 5;i++){
setTimeout(()=>{
console.log(i)
}, 0)
}What do you think will print? The answer is 5 5.
The point here is put in the time and execution time (that is, the operating mechanism executed asynchronously) asynchronous tasks are as follows: ①② the remark.
- All synchronization tasks are performed on the main thread to form a stack execution
- When setTimeout to perform asynchronous tasks when not first into the task queue, but took first timer module,
- Etc. ① setTimeout time to re-put "Task Queue", the
- Wait until runtime stack all the things inside and then to run to completion "task queue" read ②, this time setTimeout function inside the body will become synchronize tasks,
- Repeated cycles called Event Loop. As long as the main thread empty, it will go read "Task Queue", which is the operational mechanism of JavaScript.
[① When the second parameter defaults. The default is 0; when the specified value is less than 4 msec, then increased to 4ms (4ms HTML5 standard is specified, and for previous browser 2010 is 10ms); that requires at least 4 ms, the setTimeout () to get the job queue. ]
② [Once the "execution stack" of all the synchronization task is completed (i.e., for the end of the cycle, already at this time i 5), the system reads the already stored "Task Queue" of the setTimeout () (five), then The answer is the output of five 5]
Fifth, which statements will be placed in a queue and asynchronous tasks into opportunity
- setTimeout和setlnterval
- DOM event (what we usually click on the button when it will Caton, as is the case)
- ES6 The Promise
- Ajax asynchronous requests
