Question

我的interval内onPlayerStateChange函数使用progress更新requestAnimationFrame元素值。问题是CPU使用率为90% to 170%。我曾尝试清除requestAnimationFrame，当进度值与Y param相同时，当视频没有播放但仍然相同时。 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)

JavaScript中的每个函数都会返回undefined，除非您明确告诉它不要。如果您实际计划使用该返回值，则应该只分配函数的返回值。

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

所以改变这个：

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

到此：

scrollP(value, 1000, easing.linear)

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

requestAnimationFrame CPU 170％

1 个答案: