Using requestAnimationFrame

Früher gab es nur eine Möglichkeit, eine zeitgesteuerte Schleife in JavaScript zu machen: setInterval(). Wenn Sie etwas ziemlich schnell wiederholen mussten (aber nicht so schnell wie möglich, wie eine for-Schleife), würden Sie das verwenden. Zum Zwecke der Animation ist das Ziel sechzig „Frames“ pro Sekunde, um reibungslos zu erscheinen, also würden Sie eine Schleife wie diese ausführen:

setInterval(function() {
  // animiate something
}, 1000/60);

Dafür gibt es jetzt eine bessere Alternative. Paul Irish führte requestAnimationFrame vor über zwei Jahren ein. Ich habe dem nicht viel hinzuzufügen, ich hatte es nur noch nie wirklich benutzt und jetzt habe ich es, also dachte ich, ich helfe, die Nachricht zu verbreiten und schreibe über seine grundlegende Verwendung.

Warum besser?

Wie Paul erklärte

• Der Browser kann es optimieren, sodass Animationen flüssiger werden
• Animationen in inaktiven Tabs stoppen, sodass die CPU sich entspannen kann
• Batteriefreundlicher

Das einfachste Beispiel

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

Rufen Sie es einmal auf, um es zu starten, und Ihre Funktion ruft sich selbst rekursiv auf.

Starten und Stoppen

requestAnimationFrame gibt eine ID zurück, mit der Sie sie abbrechen können, ähnlich wie setTimeout oder setInterval. jQuery wurde hier nur verwendet, um eine einfache Animation zu demonstrieren und Ereignisse zu binden.

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

Beispiel davon

Check out this Pen!

Browser-Unterstützung

Siehe die Kann ich benutzen… Tabellen.

Die einzigen bemerkenswerten Probleme sind IE 9-, iOS 5- und Android. Aber eigentlich kein Problem, denn

Polyfill

Wie viele schicke Web-Features ist es schön, sie zu verwenden, wenn verfügbar, und auf etwas zurückzufallen, das funktioniert, wenn Sie es nicht können. Wahrscheinlich am besten, einfach auf diesen Gist zu verweisen. Fügen Sie diesen Block buchstäblich irgendwo ein, bevor Sie requestAnimationFrame oder cancelAnimationFrame verwenden.

Wenn Sie dies verwenden, können Sie requestAnimationFrame buchstäblich in jedem Browser verwenden.

Etwas komplexeres Beispiel

Ich habe davon erfahren, als ich eine dämliche kleine Demo gemacht habe, um Canvas besser zu lernen

Siehe den Pen Super Simple requestAnimationFrame Thing von Chris Coyier (@chriscoyier) auf CodePen.

Was tatsächlich komplexer wäre, wären mehrere Animationen, die gleichzeitig mit dieser Methode laufen (das fällt immer noch gut zurück). Fühlen Sie sich frei, etwas von dieser Güte in den Kommentaren zu verlinken, wenn Sie Beispiele kennen.