调用 requestAnimationFrame 会使动画运行得更快答案

【问题标题】：Calling requestAnimationFrame causes animation to run faster调用 requestAnimationFrame 会使动画运行得更快
【发布时间】：2014-01-16 14:58:57
【问题描述】：

按几次启动/重启按钮，您会注意到速度增加了。这并不意味着，速度应该重置为“5”。不知道怎么回事。

http://jsfiddle.net/LQEkn/

开始/重置按钮的代码在 Fiddle 的底部：

//Start game function + button
function resetGame() {
    ball.x = board.width/2;
    ball.y = board.height/2;
    ball.xSpeed = 5;
    ball.ySpeed = 0;
    player1.score = 0;
    player1.newScore = false;
    player2.score = 0;
    player2.newScore = false;
}

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    animate(step);
};

我尝试在调用之前停止动画：

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    var rid = animate(step); //animate is window.requestAnimationFrame()
    window.cancelAnimationFrame(rid);
    animate(step);
};

我已经盯着我的代码太久了，有人能快速看一下吗？谢谢！

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

你的球的实际速度很好。但是，您的游戏运行速度是原来的两倍，因为每次单击重新启动按钮都会调用animate(step)。由于animate() 只是requestAnimationFrame 的便捷包装器，因此您最终会得到比最初预期更多的动画/更新步骤。

对此最简单的解决方案是检查游戏是否已经在运行，并在这种情况下跳过animate(step) (fiddle)：

startButton.onclick = function() {
    startButtonText.innerHTML = "Restart game";
    resetGame();
    renderPresentation();
    if(!game_is_running){
        animate(step);
        game_is_running = true;
    }
};

【讨论】：

谢谢！（cancelAnimationFrame 信息已在您回答后添加到问题中，但这并没有解决问题。）
@camelBase：那是因为你还在泄露一个animate的电话。最后，您需要将rid 保存在该函数之外并检查它是否为0。如果是0，您可以清除动画并再次使用animate，但与game_is_running 没有太大区别。