随着游戏的进行，游戏循环会滞后

Question

这是我使用Game Loop的小尝试。 这是演示 。 （继续单击灰色区域以启动它）。

问题在于，单击一段时间后，游戏动画会变得断断续续，并到达类似于定格动画的地步，此后，我需要取消浏览器选项卡。

当然这里有些我想念的东西。 游戏闲置时可能需要插入一些延迟。
这是我一直在努力的代码：
HTML

<div class="container">
    <div class="player"></div>
</div>

JavaScript的

var player = {
    height: 0,
    width: 0,
    image: "",
    score: 0,
    highestScore: 0
};
var newColor=null;

/*Game loop starts here*/
var gameLoop = function () {
    $(".container").on("click", function () {
        $(".player").stop().animate({
            bottom: "+=100px"
        }, 300, function () {
            $(".player").animate({
                bottom: "0"
            }, 800);
        });
    });
/* some more calls to updating player properties etc etc will come here*/
};
/*Game loop ends here*/

/*Run the Game Loop*/
setInterval(gameLoop, 16);

---

陈述我的问题：
如何防止游戏进行过程中出现延迟？

Answer 1

滞后来自于您每16毫秒分配一个新的点击处理程序。

在gameLoop函数之外提取以下代码：

$(".container").on("click", function () {
    $(".player").stop().animate({
        bottom: "+=100px"
    }, 300, function () {
        $(".player").animate({
            bottom: "0"
        }, 800);
    });
});

您尚未发布其余代码，但请确保在gameLoop中仅更新游戏的状态，并且不要重新创建保持游戏运行的机制。