Tutorial zur Verwendung des js-Animationstimers

Dieses Mal bringe ich Ihnen ein Tutorial zur Verwendung des js-Animationstimers. 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 sich wiederholenden Animationsseite 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 die Auswertung ist dieselbe Frage;

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

Das weist auf das Problem hin, siehe Beispiel 2; ;

clearTimeout(timer) bricht den Timer ab;

setInterval, clearInterval sind die gleichen wie oben;

Beispiel 2:

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

Betriebsmechanismus

Beispiel:

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

Grund: In die Warteschlange eintreten, Ausführung blockieren.

setTimeout-Legende:

Existenz ist vernünftig

Rückruffunktion

Beispiel 3:

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

Verstehen von requestAnimationFrame

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

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

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

JS verwendet reguläre Ausdrücke, um das Geburtsdatum zu bestimmen

Detaillierte Erläuterung der Formatierungsmethode des Vue-Filters

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung des js-Animationstimers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!