几秒钟后停止 requestAnimationFrame

我见过很多用法requestAnimationFrame正在被调用并停止，但我没有看到任何有关在 x 秒后停止它的信息。我写了这段代码：

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

我的代码片段如下：

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

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

Edit:所以，我所做的是：

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

        requestAnimationFrame(drawloop);
    }

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

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

如果已经超过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()