I believe everyone has understood the concept of Event Loop more or less, but once when asked by a small partner about its specific principle, I felt that I only knew a general impression, so I planned to write an article to force input with output, so that I could learn the concept again, and at the same time help more people understand it ~
Eg. this is like a bank with only one window. customers need to queue up one by one to handle business.
Only synchronous execution is definitely problematic, so JS has a function to implement asynchrony:
The following Event Loop is to ensure that asynchronous code can continue to execute after synchronous code is executed.
Since there are many related concepts involved, let’s start with the simplest.
QueueIs a FIFO(First In, First Out) data structure, its characteristics areFIFO
Eg. the most common example in life is waiting in line. the person at the front of the line is the first to be served.
StackIs a LIFO (first in, first out) data structure, the characteristics areLast in first out.
Eg. everyone has eaten bottled potato chips ~ potato chips can only be put in from the top when they are packaged, and can only be taken out from the top when they are eaten, which is called last in, first out
We already know the stack, so what is itCall stack?
It is, of course, a stack in nature.
NonsenseThe key is that what it contains is a function to be executed one by one.
Event Loop 会一直检查 Call Stack 中是否有函数需要执行，如果有，就从栈顶依次执行。同时，如果执行的过程中发现其他函数，继续入栈然后执行。
Let’s take two functions first:
- Stack empty
- Now go to oneFunction a, function aStack
- Function a is called againFunction b, function bStack
- Function bAfter executionThe stack
- Then proceed with the executionFunction aAfter the execution, a alsoThe stack
- Stack empty
To be more complicated, let’s look at a piece of code:
The sequence of this code in the call stack is as follows:
In fact, this call stack is often seen. When the console reports an error, the error message shows the current state of the call stack.
ButIn fact, what we have discussed above is all synchronous code, which can only be interpreted by the call stack when the code is running.
Then, if we initiate a network request or set a timer setTimeout, the code (callback function) after a period of time is definitely not directly added to the call stack, is it?
At this time will lead toEvent TableAndEvent QueueThe
An Event Table can be understood as a
Event-> callback functionCorrespondence table
The simple understanding of Event Queue is
Callback function queueSo it is also called Callback Queue.
When an event in the Event Table is triggered, the correspondingCallback functionWill be push into this Event Queue and then wait to be executed.
Let’s look at a flowchart first:
- At first, the task enters Call Stack.
- Synchronous tasks wait to be executed directly in the stack, asynchronous tasks are moved from Call Stack to Event Table registration.
- When the corresponding event is triggered (or delayed to a specified time), Event Table moves the event callback function into Event Queue to wait
- When there are no tasks in the Call Stack, take out a task from Event Queue and put it into the Call Stack.
AndEvent LoopIt refers to this whole circle:
It constantly checks whether there are tasks (also called stack frames) to be executed in the Call Stack, and if not, it checks the Event Queue, pops up a task from it, puts it into the Call Stack, and loops back and forth.
Well, I don’t know if I understand it. Put on a more classic picture:
There is also a Job Queue corresponding to Event Queue, which is mainly used to execute Promise. what is the difference between the two Queues?
This involves macro task and micro task, we will talk about it in the next chapter ~
Welcome to pay attention to my public number:Code force fully open