Study the timing of setTimeout and setInterval in depth

SetInterval () – The specified number of milliseconds to execute the specified code continuously (all the time).

SetTimeout () – Executes the specified code after the specified number of milliseconds (only once).

Use the setInterVal:

Function doStuff(){setInterVal(doStuff, 100);Copy the code

Use setTimeout to simulate setInterval:

function tick() {
       doStuff();
       setTimeout(tick, 100);
 } 
tick();
Copy the code

Take a look at the difference between the two under normal conditions:

Take a look at the difference between the two under normal conditions:

SetInterval performs doStuff every 100ms, and setTimeout performs doStuff every 100ms. Therefore, the interval between each timer is 100 + T(doStuff execution time is T). This T is the key to this article.

• If T can be ignored, the effect is basically the same.
• When T <= 100, the interval for setInterval is 100 and the interval for setTimeout is 100+T.
• If T > 100, setTimeout remains as shown above, with an interval of 100+T between two timers. What about setInterval?

Take a look at the picture below:

At 0ms, timer 1 starts to enter the macro task queue. At 100ms, timer 1 starts to execute doStuff1, the queue is empty, and timer 2 enters the queue. At 200ms, timer 3 was skipped because timer 2(doStuff1) was in the queue. Browsers do not create two identical interval timers at the same time. At 300ms, timer 2 starts running, the queue is empty, and timer 4 enters the queue. And so on ~

So let’s verify that with code. T Set the parameter to 140ms. We let the timer run 5 times, according to the above understanding, the total running time should be: 100+5*140 = 800ms. The code is as follows:

let i = 0; Console. time(" total time "); function doStuff() { console.log("delay"); dead(140); The console. TimeEnd (" test "); } function dead(delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } let timer = setInterval(() => { i++; if (i > 4) { clearInterval(timer); SetTimeout (() => {console.timeEnd(" total time "); }, 0); } console.log("interval start"); The console. The time (" test "); doStuff(); }, 100); consleCopy the code

It can be seen that the timer ran for 5 times, and the total time was indeed 100 + 140*5 = 800ms.

If we set dead(250), the total test time is 100 + 250 * 5 = 1350;

What if the code in doStuff is asynchronous? For example, we often use promises. The result is returned at 140ms. The code is as follows:

let i = 0; Console. time(" total time "); function delay(i) { promise(i); } function promise(i) { return new Promise((resole,reject) => { setTimeout(() => { resole(i); }, 140); }).then(res => { console.log("res", res); }) } let timer = setInterval(() => { i++; if (i > 4) { clearInterval(timer); SetTimeout (() => {console.timeEnd(" total time "); }, 0); } delay(i); }, 100);Copy the code

You can see that the total time is 500ms, and the asynchronous code requesting the interface does not block the timer. This is also easy to understand. The synchronous code in the timer is directly queued, while the asynchronous code registers the event and is queued when it is done. So when the asynchronous code registers the event, the timer is finished, not finished until the asynchronous code returns, otherwise the total time of the timer for 5 times would be 800ms.

# According to the above code effect summary

SetInterval simply queues code at a certain point in time, and skips if a timer is already in the queue. Browsers do not create two identical interval timers at the same time.

SetInterval If the time is shorter than the execution time in the function, the actual time after the first execution time should be the total execution time in the function.

The asynchronous code in setInterval does not block the creation of a new timer.