Как остановить рекурсию/цикл 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 должен иметь полноэкранный режим, и он выполняет
• Вызывается метод startAnimating, и рендеринг начинает рисовать материал
• После щелчка по экрану я регистрирую событие fullscreenchange и выполняю метод stopAnimating
• Страница пытается выйти из полноэкранного режима, но весь документ полностью пуст.

Я уверен, что мой другой код в порядке, и я как-то останавливаю requestAnimationFrame неправильно. Мое объяснение, вероятно, было сосано, поэтому я загрузил код на свой сайт, вы можете увидеть, как это происходит здесь: http://banehq.com/Placeholdername/main.html.

Вот версия, в которой я не пытаюсь вызвать методы анимации, и полноэкранная работа внутри и снаружи: http://banehq.com/Correct/Placeholdername/main.html.

После первого нажатия кнопки play, игра инициализируется и выполняется start. После выхода из полноэкранного режима выполняется игра stop. Каждый раз, когда нажата кнопка play, игра выполняет только этот метод start, потому что нет необходимости снова ее инициализировать.

Вот как это выглядит:

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

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

    game.start();
}

И вот как выглядят методы start и stop:

self.start = function()
{
    self.container.appendChild(game.renderer.domElement); //Add the renderer 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 и stopAnimating метода вызовы в start и 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>

        var pause = false;
        function loop(){
                //... your stuff;
                if(pause) return;
                window.requestionAnimationFrame(loop);
        }
       loop(); //to start it off
       pause = true; //to stop it
       loop(); //to restart it