From callback to js single thread to asynchronous mechanism to browser multi-threading (Part 1)

          I want to find out what callback comes from a Chinese verification of the input:


         As can be seen from the above figure, callback is used as a parameter of the validation function validator. At this time, I am confused. Hey, isn't callback a callback function? It can also be used as a formal parameter of a function. So, what is this validator? Who passed the parameters here? If some parameters in values ​​and rule are controlled by external input, what about callback? Next, let's look at the printed log:


         As can be seen from the log, we can temporarily understand that the callback at this time is an inherent attribute of the validator, which can be understood as the default attribute of the constructor of the validator object by borrowing the idea of ​​​​the constructor in java.

          Let's analyze what the callback function is:

A callback is a function that is passed as an argument to another function and is executed after is parent function has complete.

         The above is Google's explanation of callbacks. I think it is easier to understand than the translated Chinese.

         callback in ajax request

                                 

Callback function for asynchronous request

                      

Callback function for click event

                      

The callback function called by traversing each item in the array

                      

Synchronous callback function

                     

       So from the above example, it can be summed up: the callback is its literal interpretation, the return value of this function, and then to understand it plainly, it is return. Let's think about the callback function from the fact that js is single-threaded.

       We all know that js is single-threaded ( JavaScript single-threaded mechanism is also a last resort, assuming there are multiple threads, modifying a dom element at the same time, then which thread does it listen to? ), this design pattern brings us There are many inconveniences, we don't need to consider the communication between threads, because the js engine can only complete and execute related operations one by one, so all requests to be executed need to be queued, waiting to be processed. implement. At this time, we will think that in the actual project, if a request takes a long time to execute, will the subsequent tasks need to wait? What's more, executing one is looping, hahaha. . . Therefore, in order to solve this problem, js has designed an asynchronous mode under the defects of the synchronous mechanism. (Of course, if the following tasks are all tasks on the main thread, that is, there is no callback function, then they can only be stuck)

        In asynchronous mode, each asynchronous task has one or more callback functions. If an asynchronous task has multiple subtasks, after the first task is completed, it will not execute the next task immediately, but execute it. The callback function, and the next task will not wait for the current callback function to be executed, because it cannot determine when the current callback is executed, as long as the task is triggered, it will be executed. (So, we can understand that js is single-threaded but has synchronous and asynchronous mechanisms)

       For example: We are shopping on Taobao. When we click to enter the product details page, the image resources are still loaded, and at this time I initiate another request to add to the shopping cart. At this time, we will find that the The event starts executing, but this execution does not affect the rest of the image load request. That's where the async pattern comes in.

       js's single-threaded browser kernel multi-threading

       Speaking of the single thread of js, by the way, let’s learn more about the multi-threading of the browser kernel. For the time being, we will analyze the working principle of the browser. There are three resident threads in the browser: js engine thread, GUI rendering thread, and browser event trigger thread.

       

             The browser is a multi-threaded execution environment. Multiple threads are allocated in the browser's kernel. One of the most important threads is the thread of the js engine. At the same time, asynchronous requests in the js event queue, interactive event triggers, timers Such events are monitored by the event trigger thread of the browser. After the event trigger thread of the browser is triggered, the task will be added to the task queue of the js engine, and the task will be executed when the js engine is idle.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324573603&siteId=291194637