Analysis of EventLoop Event Cycle in JS

  eventloop, javascript, settimeout

Order

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 ~

Concept

JavaScript is a doorSingle threadLanguage, that is, only one task can be executed at a time, that is, code execution is synchronous and blocked.

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:setTimeout

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.

Queue

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.

Stack

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

Call Stack

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:

call-stack-code.png

The sequence of this code in the call stack is as follows:

call-stack-process.png

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

Event Table

An Event Table can be understood as aEvent-> callback functionCorrespondence table

It is used to store asynchronous events (request, setTimeout, IO, etc.) in JavaScript and a list of their corresponding callback functions

Event Queue

The simple understanding of Event Queue isCallback 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.

Event Loop

Let’s look at a flowchart first:

event-loop-process.png

  • 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:

event-loop.png

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 ~

Reference article

Original link
MDN EventLoop
javascript-event-loop
understanding-js-the-event-loop
This time, thoroughly understand the JavaScript execution mechanism
understanding-event-loop-call-stack-event-job-queue-in-javascript

Welcome to pay attention to my public number:Code force fully open

图片描述