Analyzes the asynchronous io callback feature of a single JS thread, and the single js thread io callback

Analyzes the asynchronous io callback feature of a single JS thread, and the single js thread io callback

Most of our initial exposure to javascript started with javascript scripts in html. However, this seemingly simple language has been used for several years and we have not figured out some of its principles and mechanisms, is there a lie-down gun!

At least javascript uses various event callbacks when operating the dom, such as buttons, clicking links, passing through the mouse, and getting the focus.

In this process, we bind an Event Callback Function on the dom, such as onclick = "doCheck ()". This process registers a click event for the dom element, and bound to an Event Callback Function doCheck ().

When you click this element, the event is triggered, and the function bound to the event is executed immediately and returned.

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

$ ("# Id"). click (function () {alert ('click event ');});

More and more jquery syntax Writing seems to be used to it, but you have noticed that the previous selector only filters dom nodes, And the next click is an event registration, the function () {} in it is actually a parameter. the parameter of the function bound to the event requires you to be familiar with the javascript syntax.

A function is an object in javascript. An object can refer to everything in the world. Therefore, an object can contain many attributes and methods.

Since it is an object, it can be passed as a parameter. Such a function is called a high-order function.

In addition, this function does not have a defined name, right? Of course you can have a name and pass the name the same, but it does not make sense, because the function object here is actually a form parameter, therefore, we are used to not name such a function. This is often called an anonymous function.

Next, the above $ ("# id "). click: When a click event is triggered, the event binding function is executed. this is the same effect as the onclick method directly given on the dom.

If there are multiple threads in the browser to operate the script, can you imagine it's messy? When the thread is about to modify the value of Element A, it does not expect that thread 2 has deleted element A from the dom tree. At this time, the thread has to operate but reports an error. this is not a bad situation. Either the browser does not maintain the consistency of data in multiple threads, or the front-end Engineers maintain the data themselves ...... the browser has only one thread to operate the dom, which saves a lot of unnecessary trouble.

SetTimeout (function () {alert ('popped up ') ;}, 300); while (true ){........}

Do you think there will be any drama in alert ('popup') after 300 milliseconds?

No, there will be no drama. Waiting for 300 milliseconds is just to cheat your feelings, because the Browser executes the script in single thread mode.

Once the thread runs the while statement in the dead loop mode, your setTimeout will no longer function.

Then we entered the node. in the js world, it completely retains the features of javascript in the browser. It is precisely because of the single-thread asynchronous callback that it is, if it is node. js is a synchronous language. Even if all the npm packages are c ++ extensions (fast enough), you cannot compare the c language processing speed, so node. javascript may have been despised by php before it was born.

It is precisely because of its asynchronous callback IO that it can improve his efficiency. It reminds me of the comparison between a fast food restaurant and a school canteen in the past:

In the canteen, all the students lined up in a font with their plates in the window. The sister who prepared the meal was ready one by one and went to dinner one by one. This is the result of synchronous processing.

The school's fast food restaurant is also waiting for students to order food, but after ordering, you can pick up your cookbook and leave the location. in this way, the waiter can provide services for many people within the unit time, and the ordering personnel can find a place to do their own other things, instead of waiting for dinner at the window, when your meal arrives, the server will press the code according to the order number. Then the timer on your table will sound and you will just get the meal. this is asynchronous processing. the timer is triggered.

A single thread can reduce resource waste and maintenance difficulties caused by state switching between multiple threads. Of course, there are also dedicated third-party packages to support multi-core and multi-thread scenarios. You can weigh them yourself.

The above is all the information about JS single-thread callback. If you have any other questions when learning, you can discuss them in the following message area.