In-depth understanding of setTimeout and setInterval_Basic knowledge

I published an article about setTimeout and setInterval about half a year ago, but now I went back and took a closer look and found that there are actually many shortcomings and errors. In fact, setTimeout and setInterval are not as simple as we understand literally. To truly master and understand these two methods, we have to start with the single-threaded mechanism of JavaScript.

【Get straight to the point】How do setTimeout and setInterval work?
We know that js is executed in a single thread. So in fact, the so-called "asynchronous calls" of setTimeout and setInterval are actually implemented by inserting the code segment into the execution queue of the code.

How to calculate the insertion time point? Naturally, we need to use what we call timer, which is a timer. When executing setTimeout and setInterval, the timer will "accurately" find the insertion point of the code based on the time you set. When the queue "normally" executes to the insertion point, the timer callback is triggered, which is the callback function we set:

Copy code The code is as follows:

function fn() {
/*
here is some codes
*/
setTimeout(function() {alert('ok! ')},1000);
}

The above example is our usual usage and should be easy to understand. But, can timers really be that accurate? Can the execution of the code queue really be so normal?

【Cut the grass】Re-understand the so-called "asynchronous"
As you have just learned, in fact setTimeout and setInterval simply implement delayed execution of code (or asynchronous execution) by inserting code into the code queue. ). But in fact the so-called asynchronous is just an illusion - it also runs on a thread!
Then the question arises, what happens if the code execution time before the code insertion point exceeds the set time passed in setTimeout or setInterval? Let’s take a look at this code:

Copy the code The code is as follows:

function fn( ) {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}

you What do you think the execution result of this code is? The answer is that the alert never appears.
Why is this? Because the while code has not been executed, the code inserted later will never be executed.
To sum up, in fact, JS is a single-threaded product after all. No matter how "asynchronous" it is, it is impossible to break through the single-thread barrier. Therefore, many "asynchronous calls" (including Ajax) are actually just "pseudo-asynchronous". As long as you understand such a concept, it may not be difficult to understand setTimeout and setInterval.