Eine ausführliche Untersuchung der Javascript-Timer_Javascript-Fähigkeiten-js-Tutorial-php.cn

Eine ausführliche Untersuchung der Javascript-Timer_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:22:40

Original

1313 Leute haben es durchsucht

Javascript-Einzelthread

Der einzelne Thread von JavaScript hängt mit seinem Zweck zusammen. Als Browser-Skriptsprache besteht der Hauptzweck von JavaScript darin, mit Benutzern zu interagieren und das DOM zu manipulieren. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst zu sehr komplexen Synchronisationsproblemen kommt. Angenommen, JavaScript verfügt über zwei Threads gleichzeitig. Ein Thread fügt Inhalt zu einem bestimmten DOM-Knoten hinzu und der andere Thread löscht den Knoten. Welchen Thread sollte der Browser in diesem Fall verwenden? Um Komplexität zu vermeiden, ist JavaScript seit seiner Geburt Single-Threaded. Dies ist zu einem Kernmerkmal der Sprache geworden und wird sich auch in Zukunft nicht ändern.

Aufgaben in die Warteschlange stellen

Einzelner Thread bedeutet, dass alle Aufgaben in die Warteschlange gestellt werden müssen und die nächste Aufgabe erst ausgeführt wird, wenn die vorherige Aufgabe abgeschlossen ist. Wenn die vorherige Aufgabe lange dauert, muss die nächste Aufgabe warten.

Asynchron ereignisgesteuert

Viele Verhaltensweisen im Browser sind asynchron (asynchronisiert), wie zum Beispiel: Mausklickereignisse, Ereignisse zum Ziehen der Fenstergröße, Timer-Triggerereignisse, XMLHttpRequest-Abschlussrückrufe usw. Wenn ein asynchrones Ereignis auftritt, gelangt es in die Ereigniswarteschlange. Der Browser verfügt über eine große interne Nachrichtenschleife, die Ereignisschleife, die eine große Ereigniswarteschlange abfragt und Ereignisse verarbeitet. Beispielsweise ist der Browser gerade mit der Verarbeitung des Onclick-Ereignisses beschäftigt (z. B. window onSize). Dieses asynchrone Ereignis wird in die Ereigniswarteschlange gestellt, um auf die Verarbeitung zu warten ist abgeschlossen und die Veranstaltung ist kostenlos.

Ereignisschleife

JavaScript ist Single-Threaded, aber der Browser ist nicht Single-Threaded

Der Browser verfügt über mindestens einige der folgenden Prozesse

1. Browser-GUI-Rendering-Thread

2.JavaScript-Engine-Thread

3. Geplanter Browser-Trigger-Thread

4. Browser-Ereignis-Trigger-Thread

5. Asynchroner Browser-Anfragethread

Da die JavaScript-Engine Single-Threaded ist, wird der Code zuerst in die Warteschlange gestellt und dann von der Engine nach dem First-in-First-out-Prinzip ausgeführt. Ereignisverarbeitungsfunktionen und Timer-Ausführungsfunktionen werden ebenfalls in diese Warteschlange gestellt, und dann wird eine Endlosschleife verwendet, um kontinuierlich Funktionen aus dem Kopf der Warteschlange zur Ausführung zu entnehmen. Dies ist die Ereignisschleife.

Zusammenfassend lässt sich sagen, dass js Single-Threaded ist, Browser jedoch Multithreading. Wenn der Browser auf asynchrone Dinge stößt, fügt er asynchrone Rückrufe in die Ereignisschleife ein. Wenn der js-Thread nicht ausgelastet ist, gehen Sie zu „Ereignisschleife lesen“.

Timer-Prinzip

Nutzung des Timers

setTimeout(fn, Verzögerung)

setInterval(fn, Verzögerung)

fn ist eine Funktion oder ein String, Verzögerung ist die Verzögerungszeit, die Einheit ist Millisekunden

Es gibt folgende Dinge zu beachten

1.fn kann eine Zeichenfolge sein, es wird jedoch niemals empfohlen, sie auf diese Weise zu verwenden

2. Wenn die Funktion in.fn dies hat, zeigt dies bei der Ausführung auf das Fenster

Wenn Sie den einzelnen Thread und die Ereignisschleife von js verstehen, ist auch das Prinzip des Timers leicht zu verstehen

Wenn ein Timer eingestellt ist und die Verzögerungszeit erreicht ist, fügt der Browser das verzögerte Ausführungsereignis in die Ereignisschleife ein. Wenn die Zeit abgelaufen ist, wird es ausgeführt, wenn der JS-Thread inaktiv ist (also die Genauigkeit von der Timer ist nicht genau)

Ich habe einen Artikel gelesen, in dem der Unterschied zwischen setTimeout und setInterval in Abfragefunktionen erläutert wird. Der Code lautet wie folgt

Code kopieren Der Code lautet wie folgt:

setTimeout(function(){

                 setTimeout(arguments.callee,100)                                                                        
},100)

setInterval(function(){},1000)

Die allgemeine Bedeutung des Artikels besteht darin, dass setTimeout den nächsten Timer startet, nachdem die Rückruffunktion ausgeführt wurde. Daher muss sie in Intervallen ausgeführt werden, während setInterval immer ausgeführt wird be Fügen Sie der Ereignisschleife mehrere Rückrufe hinzu. Wenn der js-Thread nicht ausgelastet ist, werden mehrere gleichzeitig ausgeführt.

Nach dem Testen wurde festgestellt, dass setInterval unabhängig von FF, Chrome, Opera, Safari auf ein bestimmtes Intervall eingestellt ist

Der Testcode lautet wie folgt

Code kopieren Der Code lautet wie folgt:

setInterval(function(){
xx.innerHTML=xx.innerHTML 1;
},100);

for(var i=0;i<6000000;i ){
xx.offsetWidth
}

setTimeout(function(){
Debugger;
},10)

Am Haltepunkt wurde nur eine 1 gedruckt

Problem mit der Timer-Genauigkeit

Da js Single-Threaded ist, wird der Timer definitiv ungenau sein, und es wird definitiv immer länger. Es scheint keine Lösung dafür zu geben, keine Lösung

Ein weiteres Präzisionsproblem ist das Mindestintervall setTimeout(fun,0)

Wenn der js-Thread nicht ausgelastet ist, kann er nicht sofort nach 0 Sekunden ausgeführt werden. Es gibt immer ein Mindestintervall und jeder Browser ist anders.

Ich habe einen Artikel gelesen, in dem der W3C-Standard erwähnt wurde. Die minimale Ausführungszeit des Timers beträgt 4 ms. Ich kann die Quelle nicht finden und nicht überprüfen. ! !

Einige Optimierungen im Zusammenhang mit Timern

Bei der Erstellung von Timern kann es noch einige Optimierungen geben

1. Wenn beispielsweise window.onresize gebunden ist, wird es sehr häufig ausgelöst, wenn der Browser gezoomt wird, sodass die Ausführung verzögert werden kann, und bei der nächsten Ausführung gelöscht, um die häufige Ausführung zu reduzieren

Der Pseudocode lautet wie folgt

Code kopieren Der Code lautet wie folgt:

var timer;

Funktion r(){

          clearTimeout(timer);

        timer = setTimeout(function(){

                      //etwas tun

         },150);                                               
}

2. Wenn die Bildlaufleiste nach unten gezogen wird, sollte es auch einen Timer für das verzögerte Laden von Bildern geben, um übermäßige Berechnungen zu vermeiden

3. Wenn mehrere Orte einen Timer benötigen, können sie zu einem Timer zusammengefasst werden. Dann wird die Rückruffunktion, die ausgeführt werden muss, in das Array eingefügt Wenn das Intervall erreicht ist, wird das Array durchlaufen. Führen Sie es einfach aus

Eine kleine Demo

Code kopieren Der Code lautet wie folgt:

小伙伴们是否对javascript定时器有所了解了呢，如有疑问给我留言吧。