JavaScript engine is single-threaded

On a basic level, it is important to understand how JavaScript timers work. The execution of timers is often different from our intuitive imagination, because the JavaScript engine is single-threaded. Let's get to know how the following three functions control a timer.

1	varint = self.setInterval("updateMsg()",12000);

• var id = setTimeout (FN, delay); --Initializes a timer and executes after the specified time interval. The function returns a unique flag ID (number type) that we can use to cancel the timer. Xiping County Quine Friends Electric
• var id = setinterval (FN, delay); --similar to settimeout, but it is a continuous call to a function (time interval is the delay parameter) until it is canceled.
• Clearinterval (ID);, cleartimeout (ID); --Use the Timer ID (the return value of SetTimeout and SetInterval) to cancel the occurrence of the timer callback.

In order to understand the intrinsic execution principle of timers, there is an important concept that needs to be explored: The delay of a timer is not guaranteed. Since all JavaScript code is executed in one thread, all asynchronous events (for example, mouse clicks and timers) are executed only if they have an opportunity to execute. Use a good chart to illustrate:

There is a lot of information to understand in this diagram, and if you fully understand them, you will have a good idea of how the JavaScript engine implements asynchronous events. This is a one-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 takes about 18ms, the mouse click triggers the code execution block needs 11ms, and so on.

Since the JavaScript engine executes only one code at a time (this is due to the nature of the JavaScript single thread), each JavaScript code execution block "blocks" the execution of other asynchronous events. This means that when an asynchronous event occurs (for example, a mouse click, a timer is triggered, or an AJAX asynchronous request), the callback functions of these events will be queued at the end of the execution queue (in fact, the way the queue is different depending on the browser, so here is just a simplification);

Starting with the first JavaScript execution block, two timers are initialized in the first execution block: a 10ms settimeout () and a 10ms setinterval (). Depending on when and where the timer is initialized (the timer starts when it is initialized), the timer is actually triggered before the first block of code is finished executing. However, the function that is bound by the timer does not execute immediately (the reason for not being immediately executed is that JavaScript is single-threaded). In fact, the deferred function is queued 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 a "mouse click" Event happening. A JavaScript callback function is bound to this asynchronous event (we never know when the user will execute the (click) event, so it is assumed to be asynchronous), the function will not be executed immediately, like the above timer, it would be queued at the end of the execution queue, waiting for the next appropriate time to execute.

When the first JavaScript execution block finishes executing, 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 chooses one (in effect, the "handler for mouse click event", since it is known to be an advanced team) to execute immediately. The timer callback function waits for the next appropriate time to execute.

Note that when the mouse click event handler is executed, the setinterval callback function is triggered for the first time. As with SetTimeout's callback function, it will be queued to the end of the execution queue for execution. However, it is important to note that the first trigger of settimeout will be discarded when the setinterval callback function is triggered the second time (at which point the settimeout function is still executing). When a very long code block executes, it is possible to put all the setinterval callback functions behind the execution queue, and after the code block executes, the result is a large string of setinterval callback functions waiting to be executed, and there is no interval between the functions until all is done. So, browsers tend to have a handler function that doesn't have more interval when queued and then queues the next handler to the end of the queue (this is due to the interval problem).

We can see that when the third SetInterval callback function is triggered, the previous SetInterval callback function is still executing. This illustrates a very important fact: SetInterval does not consider what is currently being done, and then queues all the blocked functions to the end of the queue. This means that the time interval between the two setinterval callback functions is sacrificed (reduced).

Finally, when the second setinterval callback function finishes executing, we can see that there are no programs 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, when no execution block blocks its execution. So it will be executed immediately.

Let's use an example to illustrate the difference between settimeout and setinterval:

1	setTimeout(function(){

2	/* Some long block of code... */

3	setTimeout(arguments.callee, 10);

4

}, 10);

5

6	setInterval(function(){

7	/* Some long block of code... */

8

}, 10);

These two codes are no different at first glance, but they are not. The interval between the execution of the settimeout callback function and the last execution is at least 10ms (possibly more, but not less than 10ms), and the callback function of SetInterval will attempt to execute every 10ms, regardless of whether the last execution was completed.

Here we learned a lot of knowledge, summed up:

• The JavaScript engine is single-threaded, forcing all asynchronous events to be queued for execution.
• SetTimeout and setinterval are fundamentally different when executing asynchronous code.
• If a timer is blocked and cannot be executed immediately, it will defer execution until the next possible point in time is executed (longer than expected).
• If the execution time of the setinterval callback function is long enough (longer than the specified time interval), they are executed consecutively and there is no time interval between them.

These points of knowledge are all very important. Learn how the JavaScript engine works, especially when a large number of asynchronous events (sequential) occur, to build a foundation for building advanced applications.

JavaScript engine is single-threaded