canvas - 如何在requestAnimationFrame（）循环中设置间隔？

Question

我一直在寻找如何在requestAnimationFrame（）循环中停止循环。

我尝试制作一个简单的从上到下的圆形动画，每次圆圈到达底部时，在这种情况下为window.innerHeight，它会将其位置设置回其起始位置然后等待直到12秒再次动画。我尝试使用setTimeOut（），但圆圈变快了。

这是我的代码：

drawCircle = () => 
{
    requestAnimationFrame(this.drawCircle);
    this._CONTEXT.clearRect(0, 0, this._CANVAS.width, this._CANVAS.height);
    this._CONTEXT.beginPath();

    this._CONTEXT.arc(this.x, this.y, 20, 0, 2 * Math.PI);
    this._CONTEXT.lineWidth   = 1;
    this._CONTEXT.fillStyle = '#ff0000';
    this._CONTEXT.fill();

    this.y += 15;        

    if (this.y > this._CANVAS.height) {
        setTimeout(12000);
        this.initPos();
    }
}