javascript - 几秒钟后停止 requestAnimationFrame

Question

我见过很多调用和停止 requestAnimationFrame 的用法，但我还没有看到任何关于在 x 秒后停止它的用法。我写了这段代码:

http://codepen.io/anon/pen/PbvrVZ

我的代码中有一个片段是这样的:

function drawloop() {
        if (focused) {
            requestAnimationFrame(drawloop);
        }

我只是不明白如何在比方说 4 秒后停止动画。我是 JavaScript 的新手。我应该使用超时还是间隔？

编辑:所以，我所做的是:

function drawloop() {
  var start = Date.now() // note this
    if (focused & Date.now() - start < 4000) {

        requestAnimationFrame(drawloop);
    }

但这仍然不起作用。我在这里做错了什么？

Answer 1

最简单的方法是在渲染过程开始时使用变量来存储。

如果超过4秒，不运行下一帧

您可能不需要其他功能来完成您的目的。

function animateFor4Second() {
    var start = Date.now() // note this
    function loop() {
        console.log('rendering')
        if (Date.now() - start < 4000) { //note this also
            requestAnimationFrame(loop);
        }
    }
    loop(); // fire the initial loop
}

animateFor4Second()