How to implement single-threaded asynchronous io callback using JS

This article mainly analyzes the characteristics of JavaScript single-threaded asynchronous io callbacks. I hope the content we have compiled can help you.

Most of our initial contact with JavaScript started with js scripts in HTML. However, we have been using this seemingly simple language for several years, and we have not yet understood some of its principles and mechanisms. Is there any Wait!

At least JavaScript uses various event callbacks when operating the dom, such as button, link clicks, mouse passing, focus acquisition, etc.

In this process, we Bind an event callback function on the dom such as onclick="doCheck()". This process is to register a click event for the dom element and bind an event callback function doCheck().

When the mouse is clicked When this element is inserted, the event is triggered, and the event binding function is immediately executed and returned.

Later, when I came into contact with jquery, a large number of

$("#id").click(function(){
alert('点击事件');
});

the syntax of jquery was written more and more. It seems that you are used to it more and more, but you have noticed that the previous selector only selects and filters DOM nodes, and the subsequent click is an event registration, and the function(){} inside is actually a parameter, the event binding function Parameters, this requires you to be familiar with the syntax of javascript.

Function is an object in javascript. The object can refer to everything in the world, so the object can contain many attributes, methods, etc.

Since it is an object, it can be passed as a parameter. This kind of function is called a higher-order function.

And this kind of function does not have a defined name, right? Of course, you can give it a name and then pass the name over. It's the same, but it doesn't make sense, because the function object here is actually a formal parameter, so we are used to not giving this kind of function a name. This is what is often called an anonymous function.

Follow the above $( "#id").click Speaking of, when the click event is triggered, the event binding function must be executed. It has the same effect as the onclick method given directly on the dom above.

Assume that in the browser If there are multiple threads to operate the script, can you imagine the chaos? Thread 1 was about to modify the value of element A, but unexpectedly thread 2 had already deleted the node of element A from the DOM tree. At this time, thread 1 was ready The operation fails and an error is reported. This situation is not bad. Either the browser does not maintain the consistency of data across multiple threads, or the front-end engineer maintains it himself, so... the browser only has one thread to operate the DOM, so It saves a lot of unnecessary trouble.

setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

Do you think there is still a chance of alert('pop-up') after 300 milliseconds?

No, there will never be a chance. Waiting for 300 milliseconds is just cheating Your feelings. Because the browser executes scripts in single-thread mode.

Once the thread is in infinite loop mode and executes the while statement, your setTimeout will no longer have any effect.

Then we entered the world of node.js, which completely retains the characteristics of JavaScript in the browser, single-threaded asynchronous callback, and it is precisely because of this feature that it is what it is. If node.js is a synchronous language, even if all npm packages are all C extensions (fast enough, right?) No matter how fast you are, you can't beat the C language processing speed, right? Then node.js may have been despised by PHP before it was born.

It's precisely because Its asynchronous callback IO can improve its efficiency. It reminds me of the comparison between a fast food restaurant in the previous school and the school cafeteria:

The cafeteria is where all the students are lined up in a line by the window with their plates. Team up, the sister who prepared the meal filled it one by one, brought the meal one by one and left. This is the result of synchronization.

School fast food restaurants also have students queuing up to order, but after ordering, take your pager You can leave and find a seat. In this way, the waiter can provide services to many people during the unit time, and students who have ordered meals can find a seat to do other things on their own, instead of standing at the window waiting for the meal until your meal comes out. At that moment, the server will press the code according to the order number. At this time, the pager on your table will ring, and you can just go and pick up the meal. This is asynchronous processing. The ringing of the pager is the trigger event.

Single threading can reduce resource waste and maintenance difficulties caused by state switching between multiple threads. Of course, there are also specialized third-party packages to support multi-core and multi-thread scenarios. You can weigh your own.

The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.

Related articles:

Detailed interpretation of the navigation usage of react-navigation

Detailed interpretation of Function function in javascript (detailed tutorial)

How to implement custom visualization using AngularJS2 integrated with D3.js

The above is the detailed content of How to implement single-threaded asynchronous io callback using JS. For more information, please follow other related articles on the PHP Chinese website!