What is the difference between setTimeout and setInterval?

It may even mistakenly understand the two functions that implement scheduled calls as something similar to thread, and think that they will execute the called functions concurrently in a time slice, which seems very good and powerful, however, this is not the case. The actual situation is that javascript runs in the browser's javascript engine in a single thread, the functions of setTimeout and setInterval are to insert the code you want to execute into a code queue maintained by the js engine at a specified time point, inserting a code queue does not mean that your code will be executed immediately. It is important to understand this. besides, setTimeout and setInterval are different.

Let's talk about setTimeout first.
Copy codeThe Code is as follows:
Function click (){
// Code block1...
SetTimeout (function (){
// Process...
},200 );
// Code block2
}

Suppose we bind this method to the onclick event of a button. When we press the button, we must first execute the content of block1 and then run it to the location of setTimeout. setTimeout will tell the browser, "After Ms, I will insert a piece of code to your queue." The browser certainly agreed (note that inserting Code does not mean executing it immediately). After the setTimeout code is run, the subsequent block2 code is executed. The problem is explained here. If the execution time of block2 Code exceeds 200 ms, what will happen? Maybe, according to your previous understanding, it will be taken for granted that your process Code will be executed immediately after Ms... the fact is that the process Code is inserted into the code queue during block2 execution (MS after execution), but the process code segment will be executed until the execution of the click method ends, from the code queue, the process Code is behind the click, and js is executed in a single thread mode, so it is not difficult to understand. in another case, the block2 code execution time is <200 ms, and setTimeout inserts the process code into the code queue after ms, at that time, the execution thread may be in the idle state (idle). The result is that after ms, the process Code is inserted into the queue and executed immediately. It makes you feel like it will be executed after Ms.
Let's take a look at setInterval.
There may be two problems:
1. The time interval may be skipped.
2. The interval may be <the execution time of the regularly called code
Copy codeThe Code is as follows:
Function click (){
// Code block1...
SetInterval (function (){
// Process...
},200 );
// Code block2
}

Like above, we assume that a click triggers setInterval to execute the process code every other time period.

For example, if onclick is executed within ms, block1 code is executed, and setInterval is executed within 5 ms, the process Code is inserted at 20 ms. The click code ends successfully, the process code starts to be executed (equivalent to the timer code in the figure). However, the process code is executed for a long time, which exceeds the next insertion time of 405 ms, in this way, after the code queue is inserted, a piece of process Code is inserted, and the process continues to be executed, and the insertion time is more than 60 milliseconds. The following question is, you may think that the Code queue will be followed by another process code inserted... the real situation is that the Code queue already has an unexecuted process Code, so the 60-5 ms insertion time point will be "heartless" skipped, because the js engine only allows one piece of unexecuted process code, I don't know if you will be suddenly enlightened...

In this case, you can use a better form of code.
Copy codeThe Code is as follows:
SetTimeout (function (){
// Processing
SetTimeout (arguments. callee, interval );
}, Interval );

This estimate gives you a bit of insight into the benefits, so that you won't have any questions that will be skipped at a time point. I hope this will be helpful, maybe I am not very clear about it. If you think you have a good foundation in English, you can directly read it.

In this section about advanced Timers, I personally think this book is really good, whether you want to learn from scratch, or do not have to flip the reference is very good, the author is a front-end development engineer from yahoo :)