three.js - 使用setTimeout时如何停止threejs动画？

Question

为了设置每秒帧速率 (fps)，我使用了通用模式：

function animate() {
    setTimeout( function() {
        id = requestAnimationFrame( animate );
    }, 1000 / fps );
    renderer.render();
}

我的问题是停止这个循环的最佳方法是什么？运行cancelAnimationFrame(id);不起作用，因为这会杀死一个瞬间帧，但是一旦 setTimeout 回调触发，它就会再次启动。

我发现使用额外的标志似乎不需要显式调用cancelAnimationFrame：

let isAnimating = false;

function animate() {
    if(!isAnimating) return;
    setTimeout( () => requestAnimationFrame(animate), 1000/fps )
    renderer.render();
}

function startAnimating(){
    isAnimating = true;
    animate();    
}

function stopAnimating(){
    isAnimating = false;
}

...但我想知道是否有更好/更清洁的方法（我想确保不会导致任何内存泄漏！）？谢谢！

标签： three.js