HTML page freezes after pressing a button

问题

So, this is a strange one. I have a web page with a CSS/HTML button. When I press the button, the page freezes. It doesn't crash, just freezes (the button is supposed to fade out after clicking). Also, I can't open the JavaScript (or f12) console and I can't reload the page. On the page, even when I move my mouse off the button or anything that's clickable, the mouse still shows itself as a pointer. However, I can still move my mouse, exit out of the tab, go to a different tab, open a tab, and switch full-screen pages.
Here is my 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>

(The button in question is "butStartGame button", which is actually a div, but acts like a button. Also, "butInfo button" doesn't freeze the page.
Here's my JavaScript (all variables are defined, this is just the part relating to my button press.

        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);
        }

BTW sorry about the format, I'm copying this from my files and this isn't all of my code.
About the "var game = new bubbleShoot.game, game.init' part of my code: my JavaScript shown here is all wrapped in "bubbleShoot.game", so running "game.init" is just running the "this.init" shown in the code.
My question, quite simply, is "Why does my webpage freeze?"

回答1:

As far as the question currently stands it sounds like one of the functions in startGame () is stuck in an infinite loop

Try debugging and placing some console.log ("getNextBubble ()") if you start seeing the name of the function more then once your in an infinite loop

If that doesn't solve your question I highly suggest you update your question with more details

来源：https://stackoverflow.com/questions/45243893/html-page-freezes-after-pressing-a-button

标签

javascript

jquery

html

css

freeze