javascript - About setInterval execution mechanism

Question

//Update: This question has no reference value and is a bit brain-draining. I have applied to close it. For details, please see my answer below

I saw a blog mentioned two days ago: If the execution time of the setInterval callback function is greater than the specified delay time, when the timer is triggered, if the task queue has a callback function for the same timer, then this callback will be ignored, which means that there will not be two or more callback functions for the same timer in the task queue. The statement is unclear, just look at the code:

Example 1

(function(){
    var j=1;
    var start=new Date().getTime();
    var timr=setInterval(function(){
        console.log("第"+j+"次定时器开始时间："+(new Date().getTime()-start));
        for(var i=0;i<5000;i++){console.log("")};
        console.log("第"+j+"次定时器结束时间："+(new Date().getTime()-start));
        j++;
    },100);
    setTimeout(function(){
        clearInterval(timr)
    },1000)
})()

setInterval adds a function to the task queue every 100ms, and setInterval is cleared after 1000ms. Explain this result according to the above statement:

1. Put the first for loop into the task queue at 100ms, and the idle main thread starts executing this loop, which takes 863ms;

2. During the execution of the first for loop, the second timer is triggered at 200ms, and the second for loop is put into the empty task queue until the main thread is idle and starts executing the second time after 964ms. A for loop;

3. When the third to eighth timer (theoretical sequence number) is triggered, the main thread is executing the first for loop, and there is a second for loop in the task queue, so these functions are ignored , did not enter the task queue;

4. At 900ms, the ninth timer is triggered, and the main thread is executing the second for loop. The function of this timer does not exist in the task queue, so the function of this timer is put into the task queue. That is the "3rd timer" in the result;

5. At 1000ms, the tenth timer is triggered, which is ignored for the same reason as the third one, and then setInterval is cleared.

Example 2

But the result of another example test is not like this

for(var i=0;i<10000;i++){
    console.log(1)
}
setInterval(function(){
    console.log("定时器")
},1000)

The browser first executes the for loop, which took about 13 seconds on my computer (the computer is so bad...). According to the above statement, during this 13 seconds, there will only be one timer in the task queue. function, and then the running result is to print out 13 "timers" at the same time after 13 seconds, and then execute the function in a one-second cycle.

question

The above two examples are conflicting. How does setInterval work in this case? I hope I can give you a clear answer, preferably with authoritative information. Thank you Dakar.

Answer 1

I asked this question, and now I realize I’m a little confused. . .
In the second example, the js thread has been occupied during the execution of the for loop, and the following statement has not been parsed, that is, the timer has not been registered. Modify the example and add execution time:

var start=new Date().getTime();
for(var i=0;i<10000;i++){
    console.log(1)
}
console.log("耗时"+(new Date().getTime()-start))
setInterval(function(){
    console.log("定时器"+(new Date().getTime()-start))
},1000)

It will be clear when you use this example for testing. The above for loop executed for about 1544ms. At this time, the js thread parsed the statement, the timer was registered, and then executed normally.

So there is no conflict between the two examples. The first example is correct. When the main thread is executing the timer function and the task queue has the same timer function, all the timer triggers will occur during this period. will be ignored.

Answer 2

However, Example 2 for setInterval was not executed before ending