By Lydia Hallie

Translator: Front-end wisdom

Source: dev

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

What is an event loop and why do you want to understand it?

JS is single-threaded: you can only run one task at a time. Usually this isn’t a big deal, but now imagine we’re running a task that takes 30 seconds. In this task, we wait 30 seconds before we can do anything next (JS runs on the main thread of the browser by default, so the entire UI is stuck).

Fortunately, browsers provide something that the JS engine itself does not: a Web API. This includes DOM apis, setTimeout, HTTP requests, and so on. These apis help us create asynchronous, non-blocking behavior.

When we call a function, it is added to the call stack. The call stack is part of the JS engine and is not browser-specific. The order inside the stack is first in last out, and when a function returns a value, it pops off the stack.

Response returns a setTimeout function. SetTimeout is provided by the Web API: it allows us to delay tasks without blocking the main thread. The callback we passed to the setTimeout function ()=> {return ‘Hey’} was added to the Web API. At the same time, the setTimeout and response functions pop off the stack, and they both return their values.

In the Web API, the timer runs for as long as the second argument we passed to it, 1000ms. Callbacks are not immediately added to the call stack, but are passed on to the queue.

This can be a confusing part: it doesn’t mean that the callback function is added to the call stack after 1000ms, it just adds to the queue after 1000ms. In a queue, a function must wait its turn before executing.

Now, we’re waiting for the event loop to do its only job: connect the queue to the call stack. If the call stack is empty, then the first item in the queue is added to the call stack if all the previously called functions have returned their values and have been ejected from the stack. In this case, no other functions are called, which means that the call stack is empty when the callback function becomes the first item in the queue.

The callback function is added to the call stack, called, returns a value, and pops off the stack.

It’s fun to animate, but you need to watch it a few more times to understand the relationship. Now to test this, say the result, as shown in the following code:

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

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

Is that clear? Let’s take a quick look at what happens when you run this code in a browser

1. Call the function bar, which returns setTimeout.

2. The callback we passed to setTimeout is added to the Web API, and the setTimeout function and bar pop up from the call stack.

3. The timer runs while the function foo is called and prints First. Foo returns, then calls the function baz and adds the callback to the queue.

4. The function baz prints Third, the event loop sees baz return, the call stack is empty, and then adds the callback from the processing queue to the call stack.

  1. The callback function printsSecond.

I hope this article helped you understand the loop of events. See you next.

Original text: dev. To/lydiahallie…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

I am Xiaozhi, the author of the public account “Big Move the world”, and a lover of front-end technology. I will often share what I have learned to see, in the way of progress, mutual encouragement!

Pay attention to the public number, background welfare, you can see the welfare, you know.