Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des JS-Animationstimers
Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung des JS-Animationstimers geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JS-Animationstimers?
Im Großen und Ganzen: Alle durch js veränderten visuellen Darstellungen werden als Animationen bezeichnet, zum Beispiel Schaltflächen, Links und andere Elemente Interaktives Feedback.
Im engeren Sinne: der visuelle Animationseffekt, der durch kontinuierliches Aufrufen von js-Funktionen über Timer erzeugt wird, um Elementattribute zu ändern.
Timer ist die Kerntechnologie der JavaScript-Animation;
setTimeout(), setInterval() sind in der Vergangenheit bekannt und wurden oft verwendet; >Normalerweise tun sie etwas Zusätzliches und Tüpfelchen auf dem i.
Vorsichtige Leute stellen möglicherweise ein Phänomen fest: Beim Wechsel von anderen Registerkarten zu einer Seite mit Schleifenanimation kommt es zu Verzögerungen und einem schnellen Framewechsel 🎜>Das Problem liegt in ihrem internen Betriebsmechanismus;
Verstehen Sie setTimeout
Es wird empfohlen, die Funktionsform für den ersten Parameter zu verwenden, die Zeichenfolgenform wird zweimal analysiert und eval ist die gleiche Frage;
Das weist auf das Problem hin, siehe Beispiel 2; integer;
clearTimeout(timer) bricht den Timer ab;
setInterval, clearInterval sind die gleichen wie oben;
setTimeout(function(a,b){ console.log(a+b); },1000,1,1);
Beispiel 2:
var a = 0; function foo(){ console.log(this.a); }; var obj = { a : 2, foo:foo } setTimeout(obj.foo,100);
Betriebsmechanismus
Beispiel:
setTimeout(function(){ console.log(1); }); console.log(0);
Grund: Treten Sie der Warteschlange bei und blockieren Sie die Ausführung.
setTimeout-Legende:
setInterval-Legende:Existenz ist vernünftig
Sprudelndes Ereignis des übergeordneten und untergeordneten Elements, das übergeordnete Element muss zuerst ausgeführt werden, siehe Beispiel 3; BenutzerdefinierteRückruffunktion
, die normalerweise vor der Standardaktion des Browsers ausgelöst wird, siehe Beispiel 4 ;Beispiel 3:
<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p> <script> myp.onclick = function(){ setTimeout(function(){ alert(0); }) } document.onclick = function(){ alert(1); } </script>
Die Verwendung ist ähnlich wie setTimeout, außer dass kein Zeitparameter erforderlich ist; 🎜>
Der Mechanismus ist völlig anders: 2. raf ist eine Schnittstelle, die speziell für Animationen durch Benutzeragenten (Browser) entwickelt wurde. Der Benutzeragent aktualisiert Animationsframes in einer angemessenen Häufigkeit (im Allgemeinen mit der Überwachungsaktualisierungsfrequenz, 1000/60 ms) und stoppt Frame-Updates auf ausgeblendeten oder inaktiven Seiten, spart CPU-Ressourcen; Raf ist einfach und kompatibel<input type="text" id="myInput"> <script> myInput.onkeypress = function(event) { setTimeout(function(){ myInput.value = myInput.value.toUpperCase(); }); } </script>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website! Empfohlene Lektüre:
Detaillierte Erläuterung der Anwendungsfälle von Angular Components
Detaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks von Drittanbietern und Steuerelemente in Angular
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des JS-Animationstimers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!