按下按钮后，HTML页面会冻结 [英] HTML page freezes after pressing a button
问题描述
f12 ）控制台，我无法重新加载页面。在页面上，即使当我将鼠标移出按钮或任何可点击的按钮时，鼠标仍然显示为指针。但是，我仍然可以移动鼠标，退出选项卡，转到其他选项卡，打开选项卡并切换全屏页面。这是我的HTML：
<！DOCTYPE HTML>
< html lang =en-US>
< head>
< meta charset =utf-8>
< title> Agent Bubble Popper< / title>
< link href =CSS / main.css =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 =canvaswidth =750height =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 =startGameclass =dialog>
< div id =startGameMessage>
< h2>开始新游戏< / h2>
< / div>
< div class =butStartGame button>
新游戏
< / div>
< div class =butInfo button>
泡泡信息
< / 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点击，clickGameScre EN）;
}
顺便说一下这个格式，我从我的文件和这个不是我所有的代码。
关于我的代码中的var game = new bubbleShoot.game，game.init部分：这里显示的JavaScript全部包裹在bubbleShoot.game中，所以运行game.init只是运行代码中显示的this.init。
我的问题很简单，就是为什么我的网页会冻结？。
至于目前的问题，听起来像
startGame（）中的一个函数被卡住了在一个无限循环中 尝试调试并放置一些 console.log（getNextBubble（））如果你的问题没有解决你的问题，我强烈建议你用更多的细节更新你的问题。
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?"
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
这篇关于按下按钮后，HTML页面会冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
