javascript – Informationen zum Ausführungsmechanismus von setInterval

Question

//Update: Diese Frage hat keinen Referenzwert und ist etwas verwirrend. Sie wurde geschlossen. Einzelheiten finden Sie in meiner Antwort unten

Ich habe einen vor zwei Tagen erwähnten Blog gesehen: Wenn die Ausführungszeit der Rückruffunktion setInterval größer als die angegebene Verzögerungszeit ist, wenn der Timer ausgelöst wird und die Aufgabenwarteschlange über eine Rückruffunktion für denselben Timer verfügt, wird dieser Rückruf ausgeführt Wird ignoriert, was bedeutet, dass sich in der Aufgabenwarteschlange nicht zwei oder mehr Rückruffunktionen desselben Timers befinden. Die Aussage ist unklar, schauen Sie sich einfach den Code an:

Beispiel 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 fügt alle 100 ms eine Funktion zur Aufgabenwarteschlange hinzu und setInterval wird nach 1000 ms gelöscht. Erklären Sie dieses Ergebnis gemäß der obigen Aussage:

1. Fügen Sie die erste for-Schleife bei 100 ms in die Aufgabenwarteschlange ein, und der inaktive Hauptthread beginnt mit der Ausführung dieser Schleife, die 863 ms dauert

Während der Ausführung der ersten for-Schleife wird der zweite Timer bei 200 ms ausgelöst und die zweite for-Schleife wird in die leere Aufgabenwarteschlange gestellt, bis der Hauptthread inaktiv ist und nach 964 ms mit der Ausführung der zweiten for-Schleife beginnt

2. Wenn der Timer (theoretische Sequenznummer) vom dritten bis zum achten Mal ausgelöst wird, führt der Hauptthread die erste for-Schleife aus und es gibt eine zweite for-Schleife in der Aufgabenwarteschlange, sodass diese Funktionen und die Aufgabe ignoriert werden ist nicht in der Warteschlange eingetragen

3. Bei 900 ms wird der neunte Timer ausgelöst und der Hauptthread führt die zweite for-Schleife aus. Die Funktion dieses Timers ist in der Task-Warteschlange nicht vorhanden, daher wird die Funktion dieses Timers in die Task-Warteschlange gestellt das Ergebnis. „3. Timer“

4. Bei 1000 ms wird der zehnte Timer ausgelöst, aber aus demselben Grund wie der dritte ignoriert, und dann wird setInterval gelöscht.

5. Beispiel 2

Aber das Ergebnis eines anderen Beispieltests ist nicht so

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

Der Browser führt zuerst die for-Schleife aus, was auf meinem Computer etwa 13 Sekunden gedauert hat (der Computer ist so schlecht...) Während dieser 13 Sekunden wird es nur eine Funktion dieses Timers geben Das laufende Ergebnis besteht dann darin, nach 13 Sekunden 13 „Timer“ gleichzeitig auszudrucken und die Funktion dann in einem Zeitraum von einer Sekunde auszuführen.

Frage

Die beiden oben genannten Beispiele sind widersprüchlich. Wie funktioniert setInterval in diesem Fall? Ich hoffe, ich kann Ihnen eine klare Antwort geben, vorzugsweise mit verlässlichen Informationen. Danke Dakar.

Answer 1

这个问题是我问的，现在发现有点脑抽。。。
第二个例子中，for 循环执行过程中 js 线程一直被占用，下面的语句还没有被解析，也就是定时器还没有被注册。把例子修改一下加上执行时间：

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)

用这个例子进行测试就很明白了。 上面的 for 循环执行了 1544ms 左右，这个时候 js 线程解析之后的语句，定时器被注册，然后正常执行。

所以两个例子并没有任何冲突的地方，第一个例子是对的，当主线程在执行定时器的函数，而且任务队列有同一个定时器的函数时，在这期间这个定时器所有的触发都会被忽略。

Answer 2

但是，例 2 for 在结束前，setInterval 并没有被执行啊