JS implementiert die Animations-Timer-Methode

In diesem Artikel erfahren Sie hauptsächlich, wie Sie einen Animations-Timer in JS implementieren. Im Großen und Ganzen werden alle durch JS geänderten visuellen Darstellungen als Animationen bezeichnet. 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 bekannt und wurden in der Vergangenheit häufig verwendet ;

Normalerweise tun sie etwas Zusätzliches und Tüpfelchen auf dem i.

Aufmerksame Leute können ein Phänomen feststellen, es gibt eine Schleifenanimation, wenn von anderen Registerkarten auf die Seite gewechselt wird

Das Problem liegt in ihrem internen Betriebsmechanismus

Verstehen Sie den ersten Parameter von setTimeout

Es wird empfohlen Verwenden Sie die Funktion form. Die Zeichenfolge wird zweimal analysiert und hat das gleiche Problem wie eval.

hat mehr als zwei Parameter und kann mehr sein, siehe Beispiel 1; 🎜 >Dies weist auf das Problem hin, siehe Beispiel 2;

Der Rückgabewert ist eine Ganzzahl;

clearTimeout(timer) bricht den Timer ab; >
setInterval , clearInterval ist das gleiche wie oben;

Beispiel 1:

Beispiel 2:

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

Laufmechanismus

Beispiel:

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

Grund: Treten Sie in die Warteschlange ein und blockieren Sie die Ausführung .

setTimeout-Legende:

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

setInterval-Legende:

Existenz ist vernünftig

Sprudeln des übergeordneten 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:

Beispiel 4:

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

Treffen requestAnimationFrame

Die Verwendung ist ähnlich wie bei setTimeout, außer dass kein Zeitparameter erforderlich ist

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

Der Mechanismus ist völlig anders:

1, setTimeout ist eine asynchrone Operation. Fügen Sie eine Task-Warteschlange hinzu (Ereignisschleife). Wenn der Synchronisierungscode im JS-Engine-Thread ausgeführt wird, wird er zur Ausführung aus der Task-Warteschlange entnommen.

2, raf ist eine Schnittstelle, die speziell für Animationen durch den Benutzeragenten (Browser) entwickelt wurde. Der Benutzeragent aktualisiert Animationsbilder mit einer angemessenen Häufigkeit (im Allgemeinen mit der Aktualisierungsfrequenz des Monitors identisch, 1000/60 ms) und stoppt die Bildaktualisierung, wenn sie ausgeblendet oder inaktiv ist Seiten, um CPU-Ressourcen zu sparen;

3, Raf-Beispiel

Raf ist einfach und kompatibel

Verwandte Empfehlungen:

Detaillierte Erklärung der JavaScript-Timer

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();

Ausführliche Erklärung der JavaScript-Timer

Detaillierte Analyse der Node-Timer

Das obige ist der detaillierte Inhalt vonJS implementiert die Animations-Timer-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!