Asynchronous from setTimeout and setInterval to AJAX in JavaScript

setTimeout and setInterval Execution

First, let's look at the following code to print the results

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

The print results are 1, 4, 3, 2, which you may take for granted. Let's look at the following example again

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

What will be the result this time?

1, 3, 2, not 1, 2, 3. You may have doubts here, clearly the timer set time is 0, and the browser parsing js is executed from top to bottom, should be 1, 2, 3?

At this point, we want to ask the thread problem of browser.

There are three browser threads associated with js (note that js parsing is single-threaded)-js code execution thread (main thread)-UI rendering thread-event loop thread

Among them, js code execution thread and UI rendering thread are mutually exclusive, that is to say, when js code execution thread runs, UI rendering thread will stop working, which is also to prevent DOM operation in js from causing two threads to collide; The event loop thread is special, and its function will be explained according to the execution process of setTimerout.

Go back to the first question above

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

Implementation process:

The js main thread runs, meets console. log (1), runs directly, outputs the result in the console;

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

Encountered the second setTimeout, where the callback function is still added to the event queue;

Execute console. log (4), where all the tasks of the main thread are executed, except the callback function in setTimeout;

At this time, the event loop thread that we have not explained starts to work. It will loop through the event queue (that is, our memo). If there is a callback function in the event queue, it will hand the callback function in the event queue back to the main thread;

The main thread receives the callback function and starts executing the function body. (Note here that because the two setTimeout have their own execution time, they will be executed in sequence according to the length of time here.)

The principle of setInterval is the same.

Generally speaking, the execution of setTimeout and setInterval will wait until all the tasks of the main thread are executed before executing the callback function, so we should pay attention when using them, especially when there are particularly time-consuming tasks in the main thread, the two timers will be unpredictably delayed.

At this point, have you thought of anything?

Well, it is asynchronous. Does the execution of setTimeout feel asynchronous at one point? But because it must wait until the main thread is completely executed, it can be called pseudo-asynchronous.

When it comes to asynchronism, we will also think of AJAX. It is said that AJAX is asynchronous, but its asynchronous principle must not be clear. You should be interested in understanding it.

Asynchronous: Simply put, you can do other things when dealing with one thing, for example, you can wait for money to be withdrawn after picking up the number in the bank, and you can play with your mobile phone and chat with others while waiting. This process is asynchronous.

Principle of asynchronous AJAX

When sending an AJAX request, the browser will have a special thread to perform the task;

There are callback functions in AJAX, such as callback after successful request and callback after failure. These callback functions and callback 1 in setTimeout will be pushed into the event queue;

The browser will provide the data returned by a county town receiving AJAX request again;

At this time, the event loop thread knows that the callback function of AJAX in the event queue can be executed, traverses the event queue and returns the callback function to the main thread of js;

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

Generally speaking, the request of AJAX will not interfere with the execution of the main thread task, and it has its own dedicated thread to handle its task, just like the browser's own son ~ ~ ~ ~