28. JS implementation mechanism

JS Allows multiple threads to be created , The concept of synchronization and asynchrony has emerged in multithreading

Let's take a look at the code below

It will print out 1,3, After the 3s Print out after 2

If we change the timer time to 0 second , Its order is still 1,3,2

Here the print 1 And 3 It belongs to synchronization task , Timers are asynchronous tasks . All synchronization tasks are placed on the main thread's execution stack , Implementation by item . Asynchronous tasks will be placed in the task queue ( It's also called message queuing ) in

• Asynchronous tasks still have time , Loading images, etc

JS First of all, it will execute Execution stack The synchronization task of , After all synchronization tasks are executed , Start executing asynchronous tasks , Asynchronous tasks are sequentially placed in asynchronous processing processes for parallel processing , When it comes to execution ( For example, it's time , Or click the event to happen ) Then put it into the synchronization task for execution

I now have this code

First JS Will distinguish these four statements , And perform synchronization tasks

• The contents of the asynchronous task queue are allocated by the asynchronous processing process

Now what is displayed on my terminal is 1,4. after JS Processing asynchronous tasks in an asynchronous processing process , After performing the synchronization task, we found that Time is 0 The timer of is triggered preferentially , At this time, the asynchronous processing process will send the callback function to the asynchronous task queue , Then send to the synchronization task queue ( If your two timer events are the same , Then it will be sent to the asynchronous task queue at the same time ( To be exact, the synchronous task queue goes to the asynchronous task queue to find out whether there are any tasks ), The asynchronous task queue will be sent to the synchronous task queue in writing order and then executed )

• At this time, in the synchronization task console.log(1) And console.log(4) It should no longer be in the synchronization task queue , Asynchronous processing of processes console.log(3) Not in an asynchronous process , The tasks in the asynchronous task queue are not transferred to the synchronous task queue console.log(3), I am writing here for the convenience of understanding

So in this step we will print 3, Although printing 3 The writing order is in print 2 After the writing order of

The last thing is to wait console.log(2) Reach time , When the time is reached, it will be put into the synchronization task queue for execution

The execution result of this code is 1,4,3,2

If it is a click event , After you click it, the callback function will be placed in the asynchronous task queue and then transferred to the synchronous task queue , After being placed in the asynchronous task queue, the asynchronous processing process is not cleared , Because if you click again, it will trigger

Synchronous task queue finding tasks from asynchronous task queue and asynchronous task queue sending tasks to synchronous task queue are infinite cycles , This loop is called an event loop (event loop)