具有不同按钮的 Javascript 函数

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

首先，如果这个问题的标题可能具有误导性，我深表歉意。我有一个关于单击按钮时发生的某个功能的问题，今天在类里面，我的教授教了我们 javascript 中的一些变量，并将它们与 onclick 一起用于我们在 html 中创建的一些按钮，我已标记的按钮表单标签下的内容如下:

window.onload=function()
{
	var extraAmmo = 210;
	var maxAmmo = 30;
	var currentAmmo = maxAmmo;
	
	var extraAmmoHud = document.getElementById("extra-ammo");
	var currentAmmoHud = document.getElementById("current-ammo");
	
	var shootButton = document.getElementById("shoot-button");
	var reloadButton = document.getElementById("reload-button");
		refreshScreen();
		
	shootButton.onclick=function()
	{
		if(currentAmmo > 0)
		{
			currentAmmo--;
			refreshScreen();
		}
	}
	reloadButton.onclick=function()
	{
		var difference = getDifference();
		if(extraAmmo >= difference)
		{
			currentAmmo += difference;
			extraAmmo -= difference;
		}
		else
		{
			currentAmmo += extraAmmo;
			extraAmmo -= extraAmmo;
		}
		refreshScreen();
		
		function getDifference()
		{
			return maxAmmo -currentAmmo;
		}
	}
	function refreshScreen()
	{
		extraAmmoHud.innerHTML="Extra Ammo: " + extraAmmo;
		currentAmmoHud.innerHTML="Current Ammo: " + currentAmmo;
	}
}

	<form>
		<input type="button" value="Shoot" id="shoot-button" />
		<input type="button" value="Reload" id="reload-button" />
		
		<p id="extra-ammo"></p>
		<p id="current-ammo"></p>
	</form>

我有一个好主意，添加一个“卸载”按钮，而不是每次使用“拍摄”按钮单击并减去 1，“卸载”按钮将是单击 1 次并说每隔半秒左右它就会自动减1，直到减为零。我需要做一些不同的事情吗？到目前为止我已经做到了这一点:

window.onload=function()
{
	var extraAmmo = 210;
	var maxAmmo = 30;
	var currentAmmo = maxAmmo;
	
	var extraAmmoHud = document.getElementById("extra-ammo");
	var currentAmmoHud = document.getElementById("current-ammo");
	
	var shootButton = document.getElementById("shoot-button");
	var reloadButton = document.getElementById("reload-button");
		refreshScreen();
		
	shootButton.onclick=function()
	{
		if(currentAmmo > 0)
		{
			currentAmmo--;
			refreshScreen();
		}
	}
	unloadButton.onclick=function()
	{
		if(currentAmmo > 0)
		{
			currentAmmo--;
			refreshScreen();
		}
	}
	reloadButton.onclick=function()
	{
		var difference = getDifference();
		if(extraAmmo >= difference)
		{
			currentAmmo += difference;
			extraAmmo -= difference;
		}
		else
		{
			currentAmmo += extraAmmo;
			extraAmmo -= extraAmmo;
		}
		refreshScreen();
		
		function getDifference()
		{
			return maxAmmo -currentAmmo;
		}
	}
	function refreshScreen()
	{
		extraAmmoHud.innerHTML="Extra Ammo: " + extraAmmo;
		currentAmmoHud.innerHTML="Current Ammo: " + currentAmmo;
	}
}

	<form>
		<input type="button" value="Shoot" id="shoot-button" />
		<input type="button" value="Unload" id="unload-button" />
		<input type="button" value="Reload" id="reload-button" />
		
		<p id="extra-ammo"></p>
		<p id="current-ammo"></p>
	</form>

我知道，这只不过是对 shotButton.onclick=function() 的复制和粘贴，我只是不确定要输入什么。

Answer 1

只需使用 setTimeout() 调用相同的事件即可。

这是一个工作示例:https://jsfiddle.net/73fen9bq/

基本上它获取对新按钮的引用:

var unloadButton = document.getElementById("unload-button");

然后在unloadButton.onclick中，如果currentAmmo > 0，它会重新触发相同的偶函数:

unloadButton.onclick = function () {
    if (currentAmmo > 0) {
        unloadTimer = setTimeout(unloadButton.onclick, 500)
        currentAmmo--;
        refreshScreen();
    } else unloadTimer = null;
}

通过将计时器句柄存储在 var unloadTimer; 中，您可以在执行其他操作时取消它，如下所示:

    if (unloadTimer != null) {
        clearTimeout(unloadTimer);
        unloadTimer = null;
    }

提示:将最后一位放入名为“cancelUnload()”或类似函数的新函数中。 ;)