JS foundation -- task queue and event loop

---

Task queue

Task refers to js Running code in code .
JS There are two kinds of tasks in ： Synchronous tasks and asynchronous tasks
Synchronous task refers to ： Tasks on the main thread are queued for execution
Asynchronous task means ： Do not enter the main thread , It's going into a " Task queue " The task of , When the task in the main thread is completed , Will take asynchronous tasks from the task queue and put them into the main thread for execution
Asynchronous tasks can be divided into ： Asynchronous macro task and asynchronous micro task .
Asynchronous macro tasks such as ： Timers, etc . Asynchronous micro task ：Promise etc. . Officially ;

There are many ways to implement asynchronous patterns , More commonly used are ：
（1） Delay class ：setTimeout、setInterval、requestAnimationFrame、setImmediate.
（2） Monitor the type of event implementation ： monitor new Image Loading state 、 monitor script Loading state 、 monitor iframe Loading state 、Message.
（3） With asynchronous function type Promise、ajax wait .

Case study

        setTimeout(()=>{              //setTimeout Is to add an asynchronous macro task   Wait for the synchronous task and asynchronous micro task to execute 
            console.log(11111)     
        },1000)
       let p=new Promise((n1,n2)=>{
           n1(22222)    
       })
       p.then((n1)=>{       //Promise Of then The method is to add an asynchronous micro task , Execute after this round of synchronization task is executed 
            console.log(n1)
       })
       console.log(33333)  // Synchronization task , The first to perform   Print 33333

The event loop

When javascript When the code is executed, different variables will be stored in different locations in memory ： Pile up （heap） And the stack （stack） To distinguish . among , There are some objects in the pile . There are some basic type variables and object pointers in the stack .

When we call a method ,js An execution environment corresponding to this method will be generated , Also called execution context . And when a series of methods are called in turn , because js It's single threaded , Only one method can be executed at a time , So these methods are queued up in a separate place . This place is called Execution stack .

js The engine does not wait for an asynchronous event to return results , It will suspend the event , Continue to perform other tasks in the execution stack .
When the asynchronous event returns the result ,js This event will be added to a different queue than the current execution stack , We call it Event queue （ Task queue ）.

Being put into the event queue does not immediately execute its callback , Instead, wait for all tasks in the current execution stack to finish , When the main thread is idle , The main thread will look up whether the event queue has tasks .
If there is , Then the main thread will take out the events in the first place , And put the callback corresponding to this event into the execution stack , Then execute the synchronization code …, So again and again , This creates an infinite cycle . This is the process called “ The event loop ” Why .
The execution stack is a running container similar to the function call stack . When the execution stack is empty ,JS The engine checks the event queue , If it's not empty , The event queue pushes the first task into the execution stack to run .
This kind of operation of constantly checking the event queue , Become The event loop .