requestAnimationFrame CPU 170%

Question

我在 onPlayerStateChange 函数中有一个 interval，它使用 requestAnimationFrame 更新 progress 元素值。问题是 CPU 的用法变成了 90% to 170%。当进度值与 Y 参数相同并且视频未播放但它仍然相同时，我试图清除 requestAnimationFrame。此外 console.log('Y') 不断记录数千次。即使我暂停视频它也会记录，它不会停止。

这里有什么问题？

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

您正在将 undefined 分配给 pFrame。这意味着您永远不会清除任何排队的帧。

发生这种情况的方式是这一行：

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

JavaScriptreturns undefined 中的每个函数，除非您明确告诉它不要这样做。如果您确实打算使用该 return 值，则只应分配函数的 return 值。

相反，您应该只使用 requestAnimationFrame 分配给 pFrame。

所以改变这个：

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

对此：

scrollP(value, 1000, easing.linear)

同样，如果您没有 return 从函数中获取任何内容，则没有理由使用它的 return 值。

requestAnimationFrame CPU 170%

requestAnimationFrame CPU 170%

javascript

youtube

youtube-api

requestanimationframe