Shulou(Shulou.com)06/03 Report--

This article introduces what is the event cycle event loop, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Event loop event loop.

The reason for the recommendation of an old question is:

It is very interesting to describe the process clearly in the form of a few moving pictures.

Why do you need it?

JavaScript is single-threaded: only one task can be run at a time. Usually, this is no big deal, but now imagine that you are running a task that takes 30 seconds. In this task, we wait 30 seconds to do anything else (by default, JavaScript runs on the browser's main thread, so the entire user interface is stuck).

This kind of experience is unacceptable, you can't spend your time on such a dull site.

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

Nice to meet you.

When we call a function, it is added to something called the call stack. The call stack is part of the JS engine, which is independent of the browser. It's a stack, which means it's in and out (think of a bunch of pancakes). When a function returns a value, it is popped off the stack.

Flowchart 1

The response function returns a setTimeout function. SetTimeout is provided to us by Web API: it allows us to delay tasks without blocking the main thread. The callback function we passed to the setTimeout function, the arrow function () = > {return 'Hey'}, is added to the Web API. At the same time, the setTimeout function and the response function are popped off the stack and both return their values!

Flowchart 2

In Web API, the timer runs as long as the second parameter we passed to it, 1000ms. Callbacks are not immediately added to the call stack, but are passed to something called a queue.

Flowchart 3

This can be a confusing part: it doesn't mean that the callback function is added to callstack after 1000ms (thus returning a value)! It is only added to the queue after 1000ms. But this is a queue, and the function must wait for its turn!

Unveil

Now that's the part we've been waiting for, it's time for the event loop to do its only task: connect the queue to the call stack. If the call stack is empty, the first item in the queue is added to the call stack if all previously called functions have returned their values and have been popped out of the stack. In this case, no other function is called, that is, when the callback function becomes the first item in the queue, the call stack is empty.

Flowchart 4

The callback is added to the call stack, called, returns a value, and then pops up from the stack, as shown in the figure:

Flowchart 5

Run a demo.

In fact, after reading these dynamic pictures, I can quite understand the author's ideas, but I still suggest that beginners can run an example to have a look, here is a good example:

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

Although it looks simple, well, you can try to do it:

Open our browser, run the above code, and let's take a quick look at what happens when this code is run in the browser:

On what is the event cycle event loop to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.