Details of the working mechanism of javascript asynchronous processing

At a basic level, it is important to understand how the JavaScript timer works. Timer execution is often different from our intuition, and that's because the JavaScript engine is single-threaded. Let's start by looking at how the following three functions control the timer.

var id = setTimeout(fn, delay); - initializes 1 timer and executes after the specified interval. This function returns a singleton flag ID (type Number), which we can use to cancel the timer.
var id = setInterval(fn, delay); - similar to setTimeout, but it calls one function in succession (with the delay argument) until it is cancelled.
clearInterval (id); , clearTimeout (id); - use timers ID (return values for setTimeout and setInterval) to cancel the timer callback
In order to understand the internal workings of timers, an important concept needs to be explored: the delay of timers (delay) cannot be guaranteed. Because all JavaScript code is executed in one thread, all asynchronous events (for example, mouse clicks and timers) are executed only when they have a chance to execute.

There is a lot of information to understand in this diagram, and if you fully understand it, you will get a good idea of how the JavaScript engine implements asynchronous events. This is a 1-dimensional icon: the vertical direction represents the time, and the blue block represents the JavaScript code execution block. For example, the first JavaScript code execution block requires approximately 18ms, the code execution block triggered by a mouse click requires 11ms, and so on.

Since the JavaScript engine only executes one piece of code at a time (due to the single-threaded nature of JavaScript), each block of JavaScript code execution "blocks" the execution of other asynchronous events. This means that when an asynchronous event occurs (for example, a mouse click, a timer is fired, or an Ajax asynchronous request), the callback function for these events will be at the end of the queue waiting to be executed (actually, the way the queue is queued varies from browser to browser, so this is just a simplification).

Start with the first JavaScript execution block, where two timers are initialized: 1 setTimeout() for 10ms and 1 setInterval() for 10ms. Depending on when and where the timer is initialized (the timer will start when it is initialized), the timer will actually be triggered before the first block of code is executed. However, the function bound on the timer is not executed immediately (the reason it is not executed immediately is because JavaScript is single-threaded). In fact, the delayed functions will be at the end of the execution queue, waiting for the next appropriate time to execute.

In addition, in the first JavaScript execution block we see that a "mouse click" event has occurred. 1 JavaScript callback function is binding on the asynchronous events (we never know when a user to carry out the event (click), therefore, that it is asynchronous, this function will not be executed immediately, and the timer 1 above, it will be executed in the end of the queue, waiting to perform once the right time.

When the first JavaScript block is executed, the browser immediately asks a question: which function (statement) is waiting to be executed? At this point, a "mouse click event handler" and a "timer callback function" are waiting to be executed. The browser will select 1 (actually "mouse click event handler" because it is the advanced team) to execute immediately. The "timer callback function" will wait for the next appropriate time to execute.

Note that when the mouse click event handler is executed, the callback function of setInterval is triggered for the first time. Like the callback function of setTimeout, it will be at the end of the execution queue waiting for execution. However, 1 must pay attention to this point: when the setInterval callback function is triggered the second time (while the setTimeout function is still executing), the first trigger of setInterval will be discarded. When a long block of code is executed, it is possible to put all the setInterval callbacks at the back of the execution queue. When the block is executed, the result will be a large string of setInterval callbacks waiting to be executed, with no interval between them until they are all completed. As a result, browsers tend to queue the next handler to the back of the queue when there are no more interval handlers (due to the spacing problem).

We can see that when the third setInterval callback is triggered, the previous setInterval callback is still executing. This illustrates an important fact: the setInterval does not consider what is currently being executed, but puts all the blocked functions at the end of the queue. This means that the time interval between the two setInterval callbacks is sacrificed (reduced).

Finally, when the second setInterval callback function is completed, we can see that there is no program waiting for the JavaScript engine to execute. This means that the browser is now waiting for a new asynchronous event to occur. At 50ms, a new setInterval callback function is triggered again, at which point, no execution blocks block its execution. So it will be executed immediately.

Let's illustrate the difference between setTimeout and setInterval with an example:

 setTimeout ( function ( ) { 
   /* Some long block of code... */ 
  setTimeout (arguments. callee, 10 ); 
  }, 10 ); 
  
 setInterval ( function ( ) { 
   /* Some long block of code... */ 
  }, 10 );
 

These two lines of code look the same at first glance, but they are different. The interval between the execution of the setTimeout callback function and the last execution is at least 10ms (possibly more, but no less than 10ms), and the callback function of setInterval will attempt to execute every 10ms, whether or not the last execution was completed.

Here we have learned a lot of knowledge, to sum up 1:

The JavaScript engine is single-threaded, forcing all asynchronous events to queue for execution
setTimeout and setInterval are fundamentally different when it comes to executing asynchronous code
If a timer is blocked and cannot be executed immediately, it will delay execution until the next possible execution point (longer than the expected interval)
If the execution time of the setInterval callback functions is long enough (longer than the specified interval), they will execute continuously and with no interval between them.

That's all for this article. I hope it will be helpful for you to learn javascript asynchronous processing.