Javascript 按下按钮后HTML页面冻结_Javascript_Jquery_Html_Css_Freeze

Javascript 按下按钮后HTML页面冻结

javascript jquery html css

Javascript 按下按钮后HTML页面冻结,javascript,jquery,html,css,freeze,Javascript,Jquery,Html,Css,Freeze,所以，这是一个奇怪的问题。我有一个带有CSS/HTML按钮的网页。当我按下按钮时，页面冻结。它没有崩溃，只是冻结了按钮应该在点击后淡出。此外，我无法打开JavaScript或f12控制台，也无法重新加载页面。在页面上，即使我将鼠标从按钮或任何可单击的位置移开，鼠标仍然显示为指针。但是，我仍然可以移动鼠标、退出选项卡、转到其他选项卡、打开选项卡以及切换全屏页面。这是我的HTML： <!DOCTYPE HTML> <html lang="en-US"> <he

所以，这是一个奇怪的问题。我有一个带有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>

顺便说一句，关于格式很抱歉，我正在从我的文件复制这个，这不是我的全部代码。关于var game=new bubbleShoot.game，game.init’我代码的一部分：这里显示的我的JavaScript都包装在bubbleShoot.game中，所以运行game.init只是运行代码中显示的this.init。

我的问题很简单，为什么我的网页会冻结？

就目前的问题而言，StartName中的一个函数似乎陷入了无限循环

如果在无限循环中多次看到函数名，请尝试调试并放置一些console.log getNextBubble

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

您是否尝试将代码重写到JSFIDLE并检查其工作原理？也许页面在另一个函数中被冻结了。StartName中的一个函数被卡在了一个无限循环中。最好开始调试它很有可能只是一个漏洞，这是浏览器对漏洞的反应。但我在你的代码里找不到。可能其他被调用的函数都有。@FlamingGenius哪个函数？^nV我注释了一个坏掉的函数，并试图修复它。谢谢这是一个好主意，但有一个问题：我的JavaScript从不运行，因为它只在按下按钮后运行，而在按下按钮后页面冻结。这意味着java脚本中有一个无限循环导致页面冻结。不，我的意思是console.log方法不起作用，因为它永远不会运行。除此之外，一切都很好。

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