requestAnimationFrame CPU 170%

Question

Ich habe eine interval innerhalb onPlayerStateChange Funktion, die den progress Elementwert unter Verwendung requestAnimationFrame aktualisiert. Das Problem ist, dass die CPU-Auslastung von 90% to 170% geht. Ich habe versucht, den requestAnimationFrame zu löschen, wenn der Fortschrittswert derselbe wie Y param ist und wenn das Video nicht spielt, aber es immer noch das selbe ist. Auch console.log('Y') protokolliert tausende Male. Es protokolliert auch wenn ich das Video pausiere, es wird einfach nicht aufhören.

Was ist das Problem hier?

var pFrame;//global 


function scrollP(Y, duration, easingFunction) { 

    var start = Date.now(), 
     elem = document.getElementById('progress'), 
     from = elem.value; 

    if(from === Y) { 
     window.cancelAnimationFrame(pFrame); 
     return; /* Prevent scrolling to the Y point if already there */ 
    } 

    function min(a,b) {return a < b ? a : b} 

    function scroll() {//this is the animatin frame 
     console.log('Y'); 

     var time = min(1, ((Date.now() - start)/duration)), 
      easedT = easingFunction(time); 

     elem.value = (easedT * (Y - from)) + from; 

     pFrame = requestAnimationFrame(scroll); 
    } 

    pFrame = requestAnimationFrame(scroll) 
} 

function onPlayerStateChange(event) { 
    //clear interval when not playing 
    //clear pFrame 
    if(player.getPlayerState() != 1) { 
     window.cancelAnimationFrame(pFrame); 
     clearInterval(to); 
    } 

    if(event.data == YT.PlayerState.PLAYING) { 
     to = setInterval(function() { 
      (duration > 0) ? value = 1/duration * player.getCurrentTime() : 0; 
      //here I call the pFrame function 
      pFrame = scrollP(value, 1000, easing.linear) 
     }, 50); 
    } 
} 

Answer 1

Sie zuweisen undefined-pFrame. Das bedeutet, dass Sie keine eingereihten Frames löschen.

Der Weg, dies ist mit dieser Linie passiert:

pFrame = scrollP(value, 1000, easing.linear) 

Jede Funktion in JavaScript gibt undefined, wenn Sie es ausdrücklich sagen, nicht zu tun. Sie sollten den Rückgabewert einer Funktion nur dann zuweisen, wenn Sie diesen Rückgabewert tatsächlich verwenden möchten.

Stattdessen sollten Sie nur pFrame mit requestAnimationFrame zuweisen.

So dies ändern:

pFrame = scrollP(value, 1000, easing.linear) 

dazu:

scrollP(value, 1000, easing.linear) 

Auch wenn Sie nichts von einer Funktion zurückkehr, gibt es keinen Grund, es ist Rückgabewert zu verwenden.