HTML 页面在按下按钮后冻结

Question

所以，这很奇怪。我有一个带有 CSS/HTML 按钮的网页。当我按下按钮时，页面冻结。它不会崩溃，只是冻结（按钮应该在点击后淡出）。另外，我无法打开 JavaScript（或 f12）控制台，也无法重新加载页面。在页面上，即使我将鼠标从按钮或任何可点击的地方移开，鼠标仍然显示为指针。但是，我仍然可以移动鼠标，退出选项卡，转到不同的选项卡，打开一个选项卡，切换全屏页面。
这是我的 HTML：

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Agent Bubble Popper</title>
        <link href="CSS/main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="JS/game.js"></script>
        <script src="JS/ui.js"></script>
        <script src="JS/bubble.js"></script>
        <script src="JS/sprite.js"></script>
        <script src="JS/board.js"></script>
        <script src="JS/renderer.js"></script>
    </head>
    <body>
        <canvas id="canvas" width="750" height="500"></canvas>
        <div id="page">
            <div id="topFrame"></div>
            <div id="game">
                <div id="board"></div>
                <div id="bubblesRemaining"></div>
            </div>
            <div id="info"></div>
            <div id="bottomFrame"></div>
            <div id="startGame" class="dialog">
                <div id="startGameMessage">
                <h2>Start a new game</h2>
            </div>
            <div class="butStartGame button">
                New Game
            </div>
            <div class="butInfo button">
                Bubble Info
            </div>
            </div>
        </div>
        <script>
            var game = new bubbleShoot.game();
            game.init();
        </script>
    </body>
</html>

（有问题的按钮是 "butStartGame button"，它实际上是一个 div，但作用类似于按钮。此外，"butInfo button" 不会冻结页面。
这是我的JavaScript（所有变量都已定义，这只是与我按下按钮相关的部分。

        this.init = function() {
            $(".butStartGame").on("click", startGame);
            $(".butInfo").on("click", startInfo);
        }
        function startGame(){
            $(".butStartGame").off("click", startGame);
            bubbleAmt = maxBubbles;
            bubbleShoot.ui.hideDialog();
            curBubble = getNextBubble();
            board = new bubbleShoot.board();
            bubbles = board.getBubbles();
            if (!requestAnimationID) {
                requestAnimationID = setTimeout(renderFrame, 40);
            };
            $("#page").on("click", clickGameScreen);
        }

顺便说一下，对于格式，我很抱歉，我正在从我的文件中复制这个，这不是我的全部代码。
关于 "var game = new bubbleShoot.game, game.init' part of my code: my JavaScript shown here is all wrapped in "bubbleShoot.game"，所以运行 "game.init" 只是运行代码中显示的 "this.init"。
我的问题很简单，就是 "Why does my webpage freeze?"

Answer 1

就目前的问题而言，听起来 startGame () 中的一个函数陷入了无限循环

尝试调试并放置一些 console.log ("getNextBubble ()") 如果您开始多次看到函数的名称然后一旦进入无限循环

如果这不能解决您的问题，我强烈建议您使用更多详细信息更新您的问题

HTML 页面在按下按钮后冻结

HTML page freezes after pressing a button

javascript

jquery

html

css

freeze