Der erste Timer -SetTimeout und das SetInterval in der BOM -Serie

setTimeout ()

Mit der Methode setTimeout () wird angegeben, dass nach der angegebenen Anzahl von Millisekunden eine Funktion oder String ausgeführt wird. Es gibt eine Ganzzahl zurück, die die Nummer des Timers repräsentiert, die an Clearimeout () übergeben werden kann, um die Ausführung dieser Funktion zu stornieren

Im folgenden Code gibt die Konsole 0 zuerst nach ca. 1000 ms, dh 1s der Rückgabewert der Timer setTimeout () -Methode aus.

 var timer = setTimeout (function () {console.log (Timer);}, 1000); console.log (0);

Es kann auch als String -Parameter geschrieben werden. Da dieses Formular dazu führt, dass die JavaScript -Engine zweimal analysiert und die Leistung verringert, wird nicht empfohlen, ihn zu verwenden.

 var timer = setTimeout ('console.log (timer);', 1000); console.log (0);

Wenn der zweite Parameter von SetTimeout weggelassen wird, stand der Parameter standardmäßig auf 0

Im folgenden Code erscheinen 0 und 1 auf der Konsole, aber 0 ist vorne, und diese Frage wird später erläutert.

 var timer = setTimeout (function () {console.log (Timer);}); console.log (0);

Tatsächlich ermöglicht die SetTimeOut () -Methode zusätzlich zu den ersten beiden Parametern auch das Hinzufügen weiterer Parameter, die in die Funktion im Timer übergeben werden.

Im folgenden Code gibt die Konsole 2 nach ca. 1000 ms aus, dh 1s. Mit dem IE9-Browser kann SetTimeout jedoch nur zwei Parameter haben und unterstützt keine weiteren Parameter. NAN wird auf der Konsole ausgegeben.

 setTimeout (Funktion (a, b) {console.log (a+b);}, 1000,1,1);

Sie können die IIFE-Parameterübertragung verwenden, um mit IE9-Browser-Funktionsparameterübertragung kompatibel zu sein

 setTimeout ((Funktion (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);

Oder schreiben Sie die Funktion außerhalb des Timers, und dann wird die Funktion mit Parametern in der anonymen Funktion im Timer aufgerufen.

 Funktionstest (a, b) {console.log (a+b);} setTimeout (function () {test (1,1);}, 1000);

Dies zeigt auf

Die vier Bindungsregeln, auf die dieser Mechanismus hingewiesen wurde, wurden in dieser Reihe ausführlich eingeführt. Da dies im Timer implizit verloren geht und sehr anfällig für Fehler ist, wird es hier erneut erklärt.

 var a = 0; Funktion foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo, 100); // 0 // äquivalent zu var a = 0;

Wenn Sie den A -Eigenschaft -Wert im OBJ -Objekt erhalten möchten, können Sie die OBJ.FOO -Funktion in einer anonymen Funktion im Timer für die implizite Bindung einsetzen.

 var a = 0; Funktion foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (function () {obj.foo ();}, 100); // 2

Oder Sie können die Bind -Methode verwenden, um diese der Foo () -Methode an OBJ zu binden

 var a = 0; Funktion foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo.bind (obj), 100); // 2

Clearimeout ()

Die SetTimeout -Funktion gibt einen Ganzzahlwert zurück, der die Zählernummer darstellt, die Ganzzahl in die ClearTimeout -Funktion übergeben und den entsprechenden Timer abgesagt hat

 // Nach 100 ms gibt die Konsole den Rückgabewert der SetTimeout () -Methode 1Var Timer = setTimeout (function () {console.log (Timer);}, 100) aus;

Daher kann dieser Wert verwendet werden, um den entsprechenden Timer abzubrechen

 var timer = setTimeout (function () {console.log (Timer);}, 100); Clearimeout (Timer);

Oder verwenden Sie den Rückgabewert direkt als Parameter

 var timer = setTimeout (function () {console.log (Timer);}, 100); Clearimeout (1);

Im Allgemeinen ist der von SetTimeOut zurückgegebene Ganzzahlwert kontinuierlich, dh der von der zweite SetTimeout -Methode zurückgegebene Ganzzahlwert ist 1 größer als der erste Ganzzahlwert.

 // Konsolenausgabe 1, 2, 3var Timer1 = setTimeout (function () {console.log (Timer1);}, 100); var Timer2 = setTimeout (function () {console.log (timer2);}, 100);

setInterval ()

Die Verwendung von setInterval ist genau das gleiche wie SetTimeout. Der einzige Unterschied besteht darin, dass SetInterval feststellt

 <button id = "btn"> 0 </button> <script> var timer = setInterval (function () {btn.innnerHtml = nummer (btn.innnerHtml) + 1;}, 1000); btn.onclick = function () {clearinterval (Timer);

[Anmerkung] Das HTML5 -Standard hat festgestellt, dass das kürzeste Zeitintervall von SetTimeout 4 Millisekunden beträgt; Das kürzeste Intervall von SetInterval beträgt 10 Millisekunden, dh das Zeitintervall von weniger als 10 Millisekunden werden auf 10 Millisekunden angepasst

Die Aktualisierungsfrequenz der meisten Computermonitore beträgt 60 Hz, was ungefähr 60 -mal pro Sekunde entspricht. Daher beträgt das optimale Schleifenintervall für den glattesten Animationseffekt 1000 ms/60, was ungefähr 16,6 ms entspricht

Um Strom zu sparen, erweitert der Browser das Zeitintervall auf 1000 Millisekunden für Seiten, die sich nicht im aktuellen Fenster befinden. Wenn sich der Laptop in batteriebetriebener, wechselt Chrome und dh 9 oder höher das Zeitintervall auf den Systemtimer, das etwa 16,6 Millisekunden beträgt

Betriebsmechanismus

Lassen Sie uns den vorherigen Teil der Frage erklären: Warum erscheint 0 im Konsolenergebnis des folgenden Codes vor 1?

 setTimeout (function () {console.log (1);}); console.log (0);

Tatsächlich bedeutet das Einstellen des zweiten Parameters von SetTimeout auf 0s nicht die Ausführung der Funktion, sondern nur die Funktion in die Codewarteschlange.

Im folgenden Beispiel wird ein Ereignishandler auf eine Buttn eingestellt. Der Event -Handler setzt einen Timer nach 250 ms an. Fügen Sie nach dem Klicken auf diese Schaltfläche zuerst den Onclick -Event -Handler in der Warteschlange hinzu. Der Timer wird nach der Ausführung des Programms festgelegt. Nach 250 ms wird der angegebene Code zur Warteschlange hinzugefügt und wartet auf die Ausführung.

 btn.onclick = function () {setTimeout (function () {console.log (1);}, 250);};

Wenn der Onclick -Event -Handler im obigen Code für 300 ms ausgeführt wurde, muss der Timercode mindestens 300 ms ausgeführt werden, nachdem der Timer festgelegt wurde. Der gesamte Code in der Warteschlange muss warten, bis der JavaScript -Prozess unabhängig davon, wie sie zur Warteschlange hinzugefügt werden, im Leerlauf ist.

Wie in der Abbildung gezeigt, kann der Timer -Code, obwohl er bei 255 ms hinzugefügt wurde, zu diesem Zeitpunkt nicht ausgeführt werden, da der Onclick -Event -Handler noch ausgeführt wird. Der früheste Timer -Code kann ausgeführt werden, bei 300 ms, dh nach Abschluss des Onclick -Event -Handlers

SetInterval -Problem

Das Problem bei der Verwendung von setInterval () besteht darin, dass der Timercode möglicherweise nicht ausgeführt wurde, bevor der Code erneut zur Warteschlange hinzugefügt wird, was dazu führt, dass der Timer -Code mehrmals in einer Zeile ohne Pausen zwischen ihnen ausgeführt wird. Die Lösung für dieses Problem der JavaScript -Engine besteht darin, den Timer -Code der Warteschlange hinzuzufügen, wenn setInterval () verwendet wird. Dies stellt sicher, dass das Mindestzeitintervall für den Timer -Code zur Warteschlange das angegebene Intervall ist

Dies kann jedoch zu zwei Problemen führen: 1. Einige Intervalle werden übersprungen; 2. Das Intervall zwischen der Codeausführung mehrerer Timer kann kleiner als erwartet sein

Angenommen, ein bestimmter Onclick -Event -Handler setzt einen 200 -ms -Intervall -Timer mit Serinterval (). Wenn der Event -Handler mehr als 300 ms benötigt und der Timercode etwa zur gleichen Zeit dauert, wird gleichzeitig ein bestimmtes Intervall übersprungen.

Der erste Timer im Beispiel wird der Warteschlange mit 205 ms hinzugefügt, erst 300 ms ausgeführt werden. Wenn dieser Timercode ausgeführt wird, wird die Warteschlange mit 405 ms eine andere Kopie hinzugefügt. Im nächsten Intervall, 605 ms, wird der erste Timercode noch ausgeführt, und es gibt bereits eine Instanz des Timercode in der Warteschlange. Infolgedessen wird der Timercode zu diesem Zeitpunkt nicht zur Warteschlange hinzugefügt

Iterate SetTimeout

Um das Problem des SetInterval () -Timers zu vermeiden, können Sie den angeketteten SetTimeout () -Anruf verwenden

 setTimeout (Funktion fn () {setTimeout (fn, intervall);}, Intervall);

Diese Musterkette ruft setTimeout () auf, und jedes Mal, wenn die Funktion ausgeführt wird, wird ein neuer Timer erstellt. Der zweite setTimeout () ruft die aktuell ausgeführte Funktion auf und legt einen weiteren Timer dafür fest. Der Vorteil davon ist, dass der neue Timercode erst dann in die Warteschlange eingefügt wird, wenn der vorherige Timer -Code ausgeführt wird, um sicherzustellen, dass keine fehlenden Intervalle vorliegen. Darüber hinaus wird sichergestellt, dass vor dem nächsten Timer -Code zumindest das angegebene Intervall gewartet werden muss, um den kontinuierlichen Betrieb zu vermeiden.

SetInterval () verwenden

 <div id = "mydiv" style = "height: 100px; width: 100px; Hintergrundfarbe: Pink; Position: absolut; links: 0;"> </div> <script> mydiv.onclick = function () {var timer = setInterval (function () {if (parseInt (mydiv.style) {clearinterval (mydiv.style.left)> 200) {{{Timer); timate (mydiv.style.left) false;} mydiv.style.left = parseInt (mydiv.style.left) + 5 + 'px'; } </script>

Verwenden Sie geketten setTimeout ()

 <div id="myDiv" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div><script>myDiv.onclick = function(){setTimeout(function fn(){if(parseInt(myDiv.style.left) <= 200){setTimeout(fn,16); }else{return false;} mydiv.style.left = parseInt (mydiv.style.left) + 5 + 'px'; } </script>

Anwendung

Verwenden Sie Timer, um die Abfolge der Ereignisse anzupassen

[1] In der Webentwicklung tritt zunächst ein Ereignis im untergeordneten Element auf und sprudelt dann zum übergeordneten Element, dh der Ereignisrückruffunktion des untergeordneten Elements wird früher als die Ereignisrückruffunktion des übergeordneten Elements ausgelöst. Wenn wir zuerst die Ereignis -Rückruffunktion des übergeordneten Elements zuerst ermöglichen, müssen wir SetTimeout (F, 0) verwenden.

Klicken Sie unter normalen Umständen auf das DIV -Element, zuerst 0, dann tauchen Sie dann 1 auf 1

 <div id = "mydiv" style = "height: 100px; width: 100px; Hintergrundfarbe: Pink;"> </div> <skript> mydiv.onclick = function () {alert (0);} document.onclick = function () {alert (1);} </script>

Wenn Sie möchten, dass das Onclick -Ereignis des Dokuments zuerst stattfindet, dh auf das Div -Element klicken, 1 wird zuerst auftauchen und dann wird 0 auftauchen. Machen Sie dann die folgenden Einstellungen vor

 <div id = "mydiv" style = "height: 100px; width: 100px; background-color: pink;"> </div> <skript> mydiv.onclick = function () {setTimeout (function () {alert (0);})} document.onclick = function () {alert (1);} </script>;

【2】 Benutzerdefinierte Rückruffunktion, die normalerweise vor der Standardaktion des Browsers ausgelöst wird. Wenn beispielsweise ein Benutzer in das Eingabefeld in Text eingibt, wird das TastePress -Ereignis ausgelöst, bevor der Browser den Text empfängt. Daher kann die folgende Rückruffunktion ihr Ziel nicht erreichen

 <Eingabe type = "text" id = "myInput"> <script> myInput.onkeypress = Funktion (Ereignis) {this.value = this.value.toUppercase ();} </script>

Der obige Code möchte die Zeichen unmittelbar nach dem Eingeben des Benutzer in den Text in die Kapitalisierung konvertieren. Tatsächlich kann es jedoch nur das vorherige Charakter in die Kapitalisierung umwandeln, da der Browser den Text zu diesem Zeitpunkt nicht erhalten hat. Dieser Wert kann den neuesten Eingangscharakter nicht erhalten.

Nur indem Sie es mit setTimeout umschreiben können, kann der obige Code funktionieren

 <input type = "text" id = "myInput"> <script> myInput.onkeypress = Funktion (Ereignis) {setTimeout (function () {myInput.value = myInput.value.touppercase ();});} </script>

Der Code endet hier. Der nächste Artikel wird es Ihnen vorstellen

BOM -Serie: RequestAnimationFrame

Die dritte Timer -Anwendung der BOM -Serie (Uhr, Countdown, Stoppuhr und Wecker)

Das obige ist das erste Timer -SetTimeout und das SetInterval der BOM -Serie, die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!