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

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;

Mehr als zwei Parameter, es können mehr sein, siehe Beispiel 1;

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; Benutzerdefinierte

Rü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>

Verstehen von requestAnimationFrame

Die Verwendung ist ähnlich wie setTimeout, außer dass kein Zeitparameter erforderlich ist; 🎜>

Der Mechanismus ist völlig anders:

1. setTimeout ist eine asynchrone Operation und wird zur Aufgabenwarteschlange hinzugefügt (Ereignisschleife). zur Ausführung aus der Aufgabenwarteschlange entfernt werden;

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!