Asynchronous from setTimeout and setInterval to AJAX in JavaScript, setintervalajax

Asynchronous from setTimeout and setInterval to AJAX in JavaScript, setintervalajax

SetTimeout and setInterval

First, let's take a look at the following code to print the result.

console.log(1);setTimeout(function() { console.log(2); },100)setTimeout(function() { console.log(3); },50)console.log(4);

The print result is 1, 4, 3, and 2. You may think it is appropriate. Let's look at the example below.

console.log(1);setTimeout(function() { console.log(2); },0)console.log(3);

What is the result of this time?

1, 3, 2, not 1, 2, 3. At this point, you may be confused. It is clear that the timer time is set to 0, and the browser parses js and runs it from top to bottom. Should it be 1, 2, or 3?

At this point, we will mention the browser thread problem.

There are three js-related browser threads (Note: js Parsing is a single thread)-js code execution thread (main thread)-UI rendering thread-event loop thread

The js Code Execution thread and UI rendering thread are mutually exclusive. That is to say, when the js Code Execution thread is running, the UI rendering thread stops working, this is also done to prevent DOM operations in js from causing conflicts between two threads. The event loop thread is special. Next we will explain its role based on the execution process of setTimerout.

Return to the first question above

console.log(1); setTimeout(function() { console.log(2); },100) setTimeout(function() { console.log(3); },50) console.log(4);

　　　Execution Process:

When the main js thread runs and encounters console. log (1), it runs directly and outputs the result on the console;

The main thread continues to run, and then encounters the first setTimeout. Then, the callback function in setTimeout will be put into an event queue (the event team here can be considered as a memorandum, it records all the things that need to be done but not done );

When the second setTimeout occurs, the callback function is still added to the event queue;

Run console. log (4). All the tasks in the main thread have been executed, except the callback function in setTimeout;

At this time, we have not yet stated that the event loop thread starts to work. It will traverse the event queue cyclically (that is, our memo). If there is a callback function in the event queue, it will re-deliver the callback function in the event queue to the main thread;

The main thread receives the callback function and starts to execute the function body. (Note that the two settimeouts have execution time, so they will be executed in sequence based on the length of time .)

The setInterval principle is the same.

In general, the execution of setTimeout and setInterval will wait until all the tasks in the main thread are executed, and then the callback function will be executed again. Therefore, pay attention when using them, especially when there is a particularly time-consuming task in the main thread, the two timers will be unanticipated and delayed.

At this point, do you think of anything?

Well, it is asynchronous. Does the execution of setTimeout feel asynchronous? However, it can be called pseudo-asynchronous because it must be executed only after all the main threads are executed.

When it comes to Asynchronization, we will also think of AJAX, which all say AJAX is asynchronous, but you should be a little interested in understanding the asynchronous principle.

Asynchronous: Simply put, you can do other things when processing a certain thing. For example, you can play mobile phones while waiting for the bank to get the number, chatting with others is asynchronous.

Asynchronous AJAX principles

When sending an AJAX request, the browser will have a dedicated thread for this task;

There are also callback functions in AJAX, such as callback after successful requests and callback after failure. These callback functions will be pushed to the event queue like the callback in setTimeout;

The browser will again provide the data returned by a county to receive AJAX requests;

The event loop thread knows that the AJAX callback function in the event queue can be executed at this time. it traverses the event queue and returns the callback function to the main js thread;

The main thread executes the internal code of the AJAX callback function.

In general, AJAX requests do not interfere with the execution of the main thread task. It has its own dedicated thread to handle the task, just like the browser's parent son ~~~

The above section describes the JavaScript code from setTimeout and setInterval to AJAX Asynchronization. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!