Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the role of EventLoop in JavaScript is, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on the role of EventLoop in JavaScript. Let's take a look at it.

Imagine, for example, that the browser is running a complex image conversion algorithm, and because it is single-threaded, the browser process is blocked and cannot render the interface or run other code. your application interface will lose interaction with the user.

This is generally not a big problem, but it is serious when browsers are running multiple similar algorithms at the same time.

With some experience, most js developers understand the asynchronous execution of code, especially the use of ajax.

/ / ajax (..) Is some arbitrary Ajax function given by a libraryvar response = ajax ('https://example.com/api');console.log(response);// `response` won't have the response

Here response will not get the results you want.

Instead, you need to get the result by means of the callback function, like the phase plane.

Ajax ('https://example.com/api', function (response) {console.log (response); / / `response` is now available})

Also, as a reminder here, the following code, async: false, is never a good idea.

/ / This is assuming that you're using jQueryjQuery.ajax ({url: 'https://api.example.com/endpoint', success: function (response) {/ / This is your callback. }, async: false / / And this is a terrible idea})

Through the above example, we should understand that asynchronous functions can help us solve similar browser blocking problems.

Of course, the same logic can be implemented through setTimeout (callback, milliseconds). If you understand asynchrony, what will the following code execution output?

Function first () {console.log ('first');} function second () {console.log (' second');} function third () {console.log ('third');} first (); setTimeout (second, 1000); / / Invoke `second`after 1000msthird ()

So what is the principle of the asynchronous processing mechanism? Here we are going to introduce our event loop Event Loop

Event Loop has a simple Job (task)-monitoring Call Stack and Callback Queue. If the call stack is empty, it fetches the first event from the queue and pushes it to the call stack to run it effectively.

This iteration is called Tick in the event loop. Each event is just a function callback.

Console.log ('Hi'); setTimeout (function cb1 () {console.log (' cb1');}, 5000); console.log ('Bye')

To execute this code, the following call stack clearly demonstrates the handling flow of the event loop.

Note that setTimeout (...) does not automatically place your callback in the event loop queue.

It sets a timer. When the timer expires, the browser puts your callback into the event loop so that some future tick will be executed. However, there may be other events in the queue that have been added-your callback will not be executed immediately.

There are many articles and tutorials about getting started with asynchronous code in JavaScript, and it is recommended that you use setTimeout (callback,0).

Now you know how Event Loop does it and how setTimeout works.

You can better understand the following code

Console.log ('Hi'); setTimeout (function () {console.log (' callback');}, 0); console.log ('Bye')

Although the wait time is set to 0 ms, the result in the browser console is as follows:

Hi

Bye

Callback

This is the end of the article on "what is the role of EventLoop in JavaScript". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the role of EventLoop in JavaScript". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.