Illustrate JavaScript event loops

The body of the

JavaScript is single-threaded, meaning that only one task can be executed at a time. For ordinary low-overhead tasks, we might not see the downside of this feature. Now let’s say we have a task that takes 30 seconds to complete, and the problem is that we have to wait 30 seconds for the task to finish before we can execute the rest of the code. In the meantime, we can’t do anything. (JavaScript runs on the main thread of the browser by default, rendering the interface unresponsive. Card into the dog) 😬. To use a popular saying: it’s 2020, we refuse to be so inefficient 🙅♂️.

Fortunately, browsers provide us with an interface that the JavaScript engine itself does not: a Web API. Web API is a collection of apis including DOM API, setTimeout, HTTP request, etc. The advent of Web apis helps us implement asynchronous, non-blocking programs 🚀

When we call a function, it is added to a structure called the Call stack. The call stack is part of the JS engine, not provided specifically by the browser. The stack structure is characterized by last in, first out (LIFO), which can be imagined as stacked books. When the function returns a value at the end of the call, the function pops 👋 from the stack

1 | | function call when being pushed into the stack, return a value after the function, the pop up from the stack.

Analyze the execution process based on the diagram above:

1. Call a functiongreet.greet()Pushes, executes the function body, returns a string"Hello". The function is called and popped from the stack.
2. Call a functionrespond.respond()Push the stack, execute the function body.
3. callsetTimeout()Get a timerid, and the callback function is executed() => { return "Hey!" }Added to Web API), pops off the stack,
4. respond()Returns a value (timer)id), and pops from the stack after execution.

And then we look down

2 | | SetTimeout provided by the browser, the Web API is responsible for its correction.

The timer runs for 100ms in the Web API (SetTimeout(() => {… }, 1000), is not immediately added to the call stack, but is placed in a structure called a queue.

3 | | when the timer to complete (that is, in this case, 1000 ms), the callback will be put into the callback queue.

SetTimeout(() => {… }, 1000) does not mean that the SetTimeout callback will be added to the call stack after 1000ms! It means 1000ms back added to _ queue _. As the name implies, in a queue, the callback function waits until its turn.

Now we wait a while… The event loop is time — it’s the bridge between the queue and the call stack. If the current call stack is empty (that is, the function that was called before executed smoothly, returned a value, and was ejected from the stack), the first item in the queue _ is added to the call stack.

4 | | event loop to check the callback queue and the call stack. If the call stack is currently empty, the event loop pushes the first item in the queue to the call stack.

The callback is added to the call stack, the call executes, returns a value, and then pops out of the stack.

5 | | callback is added to the call stack, return a value, which pop up from the stack.

Of course, telling the cycle of events graphically is still pretty pleasing to watch. But we still have to practice to really master it. Looking at the code below, can you deduce the execution and print the result?

const bar = (a)= > setTimeout((a)= > console.log("Second"), 500);
const foo = (a)= > console.log("First");
const baz = (a)= > console.log("Third");

bar();
foo();
baz();
Copy the code

Let’s examine the execution of this code in the browser.

1. callbar.barReturns asetTimeoutThe execution result of the function.
2. setTimeoutIs added to the Web API,setTimeout 和 barPop from the call stack.
3. The timer starts. At the same time,fooGet called, print"First".fooreturnundefined.bazIs called,setTimeoutThe callback is added to the queue.
4. bazprint"Third". Event loopbazWhen you return, check that the call stack is empty, and then add the callback from the queue to the call stack.
5. setTimeoutThe callback function prints"Second".

That’s all it takes, okay?

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover, please scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)