隨着游戲的進行，游戲循環會滯后

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中僅更新游戲的狀態，並且不要重新創建保持游戲運行的機制。