Warum verwendet jQuery requestAnimationFrame nicht?

73

Einige Browser unterstützen requestAnimationFrame, warum also nicht? Immerhin wird es seit Google Chrome 10 unterstützt . Trotzdem scheint jQuery es nicht zu verwenden . Ich habe einen Fehlerbericht darüber gefunden, aber es wurde keine wirkliche Erklärung gegeben? Ich bin mir jedoch sicher, dass die jQuery-Leute ihre Gründe haben.

Warum würden sie diese großartige API nicht verwenden?

Zufälliges Blau
quelle
1
Obwohl jQuery Core nicht verwendet requestAnimationFrame, habe ich in 1.8 Hooks hinzugefügt, mit denen Sie die setIntervalSchleife überschreiben können, um ein requestAnimationFramePlugin
gnarf
Die neueste Version von jQuery macht Gebrauch requestAnimationFrame. jQuery 3.0 hat es wieder aktiviert, als es im Juni 2016 veröffentlicht wurde, nachdem jQuery 1.6.3 es im September 2011 deaktiviert hatte .
Rory O'Kane

Antworten:

75

In Ticket Nr. 9381 können Sie nachlesen, warum sie requestionAnimationFramenach einiger Zeit nicht mehr verwendet werden.

Zusammenfassend lässt sich sagen, dass Animationen nicht ausgeführt wurden (Browser versuchen, die CPU-Auslastung zu reduzieren), wenn das Fenster keinen Fokus hatte. Dies ist in Ordnung, wenn das Fenster ausgeblendet ist, aber nicht, wenn es sichtbar ist, nur außerhalb des Fokus. Außerdem häuften sich die Animationswarteschlangen und nachdem das Fenster wieder fokussiert war, wurde es wahnsinnig. Dies würde hässliche Änderungen im Code und / oder Änderungen beim Hinzufügen von Dingen zur Animationswarteschlange erfordern. Daher wurde beschlossen, die Unterstützung zu entfernen, bis es einen besseren Weg gibt, dies zu tun.

Mitar
quelle
29
Ab jQuery 1.8 habe ich sichergestellt, dass wir das Überschreiben der Timer-Schleife unterstützen können, und ein sehr einfaches Plugin geschrieben, das den setIntervalwith requestAnimationFrame- github.com/gnarf37/jquery-requestAnimationFrame
gnarf
47
Es liegt hauptsächlich an Leuten, die so etwas Dummes tun setInterval(function{ $('.slideshow).animate(...); }, 3000);. Stattdessen sollten sie warten, bis das Ende jeder Animation die zweite in die Warteschlange stellt. Es ist eine einfache Lösung und wir könnten alle viel flüssigere, batteriebewusste Animationen erhalten, wenn es landen würde.
Paul Irish
12

Angesichts der anderen Antworten und Einwände hier wollte ich dies an einer einfachen Diashow-Animation testen:

http://brass9.com/nature

Ab 2013 scheinen die Einwände in anderen Antworten hier nicht mehr signifikant zu sein. Ich habe hinzugefügt

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

zu meinem vorhandenen Animationscode und überprüft, ob er sich einschaltet und die verwendeten Überblendanimationen beeinflusst. Es funktioniert zuverlässig, auch in Hintergrundfenstern, in Chrome 30, IE 11 und FF 24. Beim Testen von Android 2.3 scheint es die Polyfüllung zu verwenden und wie erwartet zu funktionieren.

jQuery 3

jQuery 3.0 integriert requestAnimationFrame . Grundsätzlich könnte jQuery gut damit umgehen, aber einige Benutzer würden anrufen.setInterval(function() { tag.animate( und es vermasseln. Also die Punt to Major Version Release. jQuery 3 unterstützt IE8 und niedriger nicht und wird es auch nie unterstützen. Wenn Sie also IE8-Benutzer haben, bleiben Sie bei jQuery 1.x.

CSS-Übergänge

In meinen Tests sind die CPU- / Batteriesparansprüche requestAnimationFramefalsche Versprechungen. Ich sehe eine hohe CPU-Auslastung, zum Beispiel bei langen Überblendungen. Was CPU / Batterie spart, sind CSS-Übergänge , wahrscheinlich weil der Browser, insbesondere mobile Browser, viel stärkere Annahmen darüber treffen kann, was Sie beabsichtigen und was sonst noch von ihnen verlangt wird, und nativer Code immer noch schneller als Javascript + DOM ist.

Wenn Sie also wirklich CPU / Akku sparen möchten, sind CSS-Übergänge genau das Richtige für Sie. IE9 und niedriger können damit nicht umgehen, und es gibt immer noch viele Benutzer. Betrachten Sie also jquery.transit und deren Fallback bis animatezum Ende der Seite.

Chris Moschini
quelle
2
Dies ist wahr, ich kann sehen, wie der Schieberegler ausgeblendet wird, wenn das Fenster keinen Fokus hat - zumindest in Chrome.
David Meister
6

In der jQuery-Quelle für Version 1.6.2 wird requestAnimationFramesie verwendet, wenn sie vorhanden ist. Ich habe den Code nicht im Detail untersucht, um festzustellen, dass er für alles verwendet wird, wofür er verwendet werden kann, aber er wird im Animationsabschnitt des Codes anstelle eines Aufrufs von verwendet setInterval(). Hier ist der Code aus 1.6.2:

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

Ich verwende 1.6.4 noch nicht, daher weiß ich nichts über diese Version. Wenn es nicht in dieser Version ist, muss es einige Probleme gegeben haben, so dass es entfernt wurde.

BEARBEITEN:

Wenn Sie diesen Blog-Beitrag lesen , hört es sich so an, als wäre er aus 1.6.3 herausgezogen worden und wird möglicherweise wieder in 1.7 aufgenommen. Der Hauptgrund dafür ist, dass einige Dinge kaputt gegangen sind, die die Animationswarteschlange für (falsch) verwendet hat ( obwohl das vielleicht Ansichtssache ist).

jfriend00
quelle
Bitte sehen Sie ajax.googleapis.com/ajax/libs/jquery/1/jquery.js Ich habe eine Suche requestionAnimationFrameohne Übereinstimmung gemacht
Randomblue
Der richtige Weg, um diesen Back Post 1.8 hinzuzufügen, ist etwas wie mein Plugin zu verwenden: github.com/gnarf/jquery-requestAnimationFrame
Gnarf