如何停止requestAnimationFrame递归/循环？
我使用带有WebGL渲染器的Three.js来制作一个当点击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。
这里是我不尝试调用动画方法的版本，并且call in和out工作：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'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和stopAnimating方法在start中调用，而stop方法被注释掉了。
回答 6
Stack Overflow用户
发布于 2012-05-25 05:16:46
所以，在做了更多的测试后，我发现确实是我的其他代码造成了问题，而不是动画停止(毕竟这只是一个简单的递归)。问题出在动态添加和删除页面渲染器的domElement中。在我停止这样做之后，因为确实没有理由这样做，并在初始化发生的地方包含了它，一切都开始正常工作。
Stack Overflow用户
发布于 2012-05-25 13:10:54
启动/停止的一种方法是这样的
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>
Stack Overflow用户
发布于 2016-03-29 08:46:47
停止就像不再调用requestAnimationFrame一样简单，重新启动就是再次调用它。例如)
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 ithttps://stackoverflow.com/questions/10735922
复制相似问题
腾讯云开发者
