如何停止 requestAnimationFrame 递归/循环？

我使用 Three.js 和 WebGL 渲染器来制作一个游戏，当play链接被点击。对于动画，我使用requestAnimationFrame.

我这样启动它：

self.animate = function()
{
    self.camera.lookAt(self.scene.position);

    self.renderer.render(self.scene, self.camera);

    if (self.willAnimate)
        window.requestAnimationFrame(self.animate, self.renderer.domElement);
}

self.startAnimating = function()
{
    self.willAnimate = true;
    self.animate();
}

self.stopAnimating = function()
{
    self.willAnimate = false;
}

当我想要的时候，我会打电话给startAnimating方法，是的，它确实按预期工作。但是，当我打电话给stopAnimating功能，东西坏了！但没有报告错误...

设置基本上是这样的：

• 有一个play页面上的链接
• 一旦用户单击链接，渲染器的domElement应该全屏，而且确实如此
• The startAnimating方法被调用并且渲染器开始渲染东西
• 单击转义后，我注册一个fullscreenchange事件并执行stopAnimating method
• 页面尝试退出全屏，确实如此，但整个文档完全空白

我很确定我的其他代码没问题，而且我正在以某种方式停止requestAnimationFrame以错误的方式。我的解释可能很糟糕，所以我将代码上传到我的网站，你可以在这里看到它发生的情况：http://banehq.com/Placeholdername/main.html.

这是我不尝试调用动画方法的版本，并且全屏输入和输出有效：http://banehq.com/Correct/Placeholdername/main.html.

Once play第一次点击，游戏初始化，start方法被执行。退出全屏后，游戏stop方法被执行。每隔一段时间play已被点击，游戏只执行它的start方法，因为不需要再次初始化它。

它看起来是这样的：

var playLinkHasBeenClicked = function()
{
    if (!started)
    {
        started = true;

        game = new Game(container); //"container" is an empty div
    }

    game.start();
}

这是如何start and stop方法如下：

self.start = function()
{
    self.container.appendChild(game.renderer.domElement); //Add the renderer's domElement to an empty div
    THREEx.FullScreen.request(self.container);  //Request fullscreen on the div
    self.renderer.setSize(screen.width, screen.height); //Adjust screensize

    self.startAnimating();
}

self.stop = function()
{
    self.container.removeChild(game.renderer.domElement); //Remove the renderer from the div
    self.renderer.setSize(0, 0); //I guess this isn't needed, but welp

    self.stopAnimating();
}

这个版本和工作版本之间的唯一区别是startAnimating and stopAnimating method calls in start and stop方法被注释掉了。

启动/停止的一种方法是这样的

var requestId;

function loop(time) {
    requestId = undefined;

    ...
    // do stuff
    ...

    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

工作示例：

const timeElem = document.querySelector("#time");
var requestId;

function loop(time) {
    requestId = undefined;
    
    doStuff(time)
    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

function doStuff(time) {
  timeElem.textContent = (time * 0.001).toFixed(2);
}
  

document.querySelector("#start").addEventListener('click', function() {
  start();
});

document.querySelector("#stop").addEventListener('click', function() {
  stop();
});

<button id="start">start</button>
<button id="stop">stop</button>
<div id="time"></div>