为什么同时弹出多个警报？答案

【问题标题】：Why are there several alerts popping up at the same time?为什么同时弹出多个警报？
【发布时间】：2015-03-28 21:43:51
【问题描述】：

我正在尝试制作这款甜甜圈答题器游戏，它应该类似于 cookie clicker。当您从商店中选择商品时，应该会弹出确认以确认您要购买该商品。我在下面的代码中使点击变得更容易。（您可能想让代码全屏显示）我的问题是，为什么确认弹出窗口会连续出现多次？在我的代码中，只有一个点击项目时确认，所以我真的不知道是什么原因造成的。

$(document).ready(function() {
	tacoClick();
});
function tacoClick() {
	//hide the items
	$(".item").hide();
	
	//defining some store items
  var clickBonus1 = {
		price: 6,
		amount: 25,
	};
	var clickBonus2 = {
		price: 75,
		amount: 10,
	};
	var clickBonus5 = {
		price: 150,
		amount: 5,
	};
	var autoClick = {
		price: 500,
		amount: 1,
	};
	var autoBonus1 = {
		price: 700,
		amount: 10,
	};
	var autoBonus2 = {
		price: 1000,
		amount: 10,
	};
	var autoBonus5 = {
		price: 1200,
		amount: 5,
	};
	var laser = {
		price: 2500,
		amount: 1,
	};
	var battery = {
		price: 1500,
		amount: 666,
	};
	var energyPotion = {
		price: 1500,
		amount: 20,
	};
	var key = {
		price: 500000,
		amount: 1,
	};
	
	//defining the player
	var player = {
		clicks: 0,
		money: 5,
		energy: 100,
		items: ["none"],
		clickAmount: 1,
		energyLost: 0.5,
		waitTime: 600000,
	};

	//clicking! YAY :)
	$("#donut").click(function() {
		//adding num clicks, money, and taking away energy
		player.clicks += player.clickAmount;
		player.energy -= player.energyLost;
		player.money += player.clickAmount / 10;

		//showing player status on the status bar
  	document.getElementById("clickNum").innerHTML = player.clicks;
	  document.getElementById("playerEnergy").innerHTML = Math.floor(player.energy);
		document.getElementById("money").innerHTML = Math.floor(player.money);
		
		//tired mode
		if(player.energy < 1 && player.energy > -1) {
			alert("You ran out of energy! You'll have to wait ten more minutes until you can play again!");
			$("body").fadeOut();
			window.setTimeout(function revive() {
				$("body").fadeIn();
				player.energy = 100;
			}, player.waitTime);
		}
		
		//the items! now, it gets really tricky...
  	if(player.money > 6) {
	  	$("#clickBonus1").show();
			$("#clickBonus1").click(function() {
				var confirmBuy = confirm("Do you want to buy this item for $50?");
				if(confirmBuy) {
					if(player.money > 6) {
						player.clickAmount += 1;
						player.money -=2;
						document.getElementById("money").innerHTML = Math.floor(player.money);
					} else {
						alert("You don't have enough money!");
					}
				}			
			});
  	}
	});
}

* {
	font-family: Arial;
	font-weight: bold;
}

#donut {
	height: 500px;
	width: 500px;
	/*background-color: grey;*/
	border-radius: 500px;
}

#donut:hover {
	cursor: pointer;
	width: 505px;
	height: 505px;
	transition: ease 0.3s;
}

body {
	/*border: 1px solid black;*/
	width: 960px;
	text-align: center;
	margin-left: 480px;
	margin-top: 200px;
}

.item:hover {
  cursor: pointer;
	background-color: #EAFFEA;
	transition: ease 0.5s;
}

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
	<script>
	  
	</script>
	<style>
		
	</style>
</head>
<body>
<div id="statusBarWrapper">
  <div id="clickNumWrapper">Total clicks: <span id="clickNum">0</span></div>
	<div id="devicesWrapper">Items: <span id="devices">none</span></div>
	<div id="energyWrapper">Energy: <span id="playerEnergy">100</span></div>
	<div id="moneyWrapper">Money: $<span id="money">5</span></div>
</div>
<div id="tacoWrapper">
	<img id="donut" src="http://cliparts.co/cliparts/LTd/jRj/LTdjRjKpc.png"/>
</div>
<div id="shopWrapper">
  <ul id="shop">
		<div class="item" id="clickBonus1">Click bonus (+1 donut / click) <br/> Price: $50</div>
		<div class="item" id="clickBonus2">Click bonus (+2 donut / click) <br/> Price: $75</div>
		<div class="item" id="clickBonus5">Click bonus (+5 donut / click) <br/> Price: $150</div>
		<div class="item" id="autoClick">Auto Click (automatically +1 / second) <br/>  Price: 500</div>
		<div class="item" id="autoBonus1">Auto Click bonus (+1 donut / second) <br/> Price: $700</div>
		<div class="item" id="autoBonus2">Auto Click bonus (+2 donut / second) <br/> Price: $1000</div>
		<div class="item" id="autoBonus5">Auto Click bonus (+5 donut / click) <br/> Price: $1200</div>
		<div class="item" id="laser">Laser (+50 donut / second) <br/> Price: $2500</div>
		<li class="item" id="battery">Battery (powers laser for 2 minutes) <br/> Price: $1500</div>
		<div class="item" id="energyPotion">Energy Potion (shortens waiting time by 30 seconds) <br/> Price: $2500</div>
		<div class="item" id="key">??????</div>
	</ul>
</div>
</body>
</html>

【问题讨论】：

为什么要加载两个版本的jquery？
一个是jQuery 2.1.1另一个是jQuery UI 1.11.4
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 我刚刚查过了。它们绝对都是 jQuery。

标签： javascript jquery html confirm

【解决方案1】：

代码可以使用一些重构，但话虽如此，我想我知道可能会发生什么。您正在将点击处理程序绑定到#donut。每次单击#donut 时，都会调用处理程序。每次调用该处理程序时，都会将单击处理程序绑定到 #clickBonus1。所以如果多次调用#donut click handler，就会对#clickBonus1应用多个handler，当#clickBonus1被点击的时候都会调用，造成多次alert。

【讨论】：

是的，可能就是这样。那么，我应该将项目功能与甜甜圈点击功能分开吗？
但是现在，我什至还没开始点击，功能就已经被读取了，而且一开始，你只有五块钱，物品从来没有出现过。
使用window.setInterval()每隔几秒检查一次玩家的钱会更好吗？
我很难理解您的代码试图完成什么。我只知道这很可能是您的回调堆积的原因。您可以考虑使用 jquery 的 one() 方法而不是 click()，以便回调只触发一次。