你在做什么不起作用
现在我有一个主要问题:当我执行按钮时,应该首先执行重新加载页面功能,然后是 day2 功能,然后是 day1 功能......问题现在只执行了刷新页面功能。
嗯,是的。您刷新了页面。这涉及离开页面然后重新进入它。离开页面意味着你的 JavaScript 结束了它正在做的一切,重新进入它意味着你的 JavaScript 重新开始。JavaScript 不会超越页面加载。
如果您希望您的 JavaScript 与其他页面上的 JavaScript 进行通信,请通过其他方式进行:URI 中的#anchor、URI 中的查询字符串、表单数据、sessionStorage、localStorage 或 cookie - 这些按永久性排列和适当性,cookie 完全过度,#anchors 和查询字符串完全适当。
但这在这里是完全没有必要和不恰当的。你一开始就不应该做你正在做的事情。
让我们解决多个按钮按下的实际问题
我的代码中有一些动画,我遇到了一个问题:当用户多次单击按钮时,我的动画会变得越来越快。
简单地说,你不应该做你正在做的事情,这个问题有一个更简单的解决方案:禁用按钮,或设置一个布尔标志,以防止动画多次运行。简单地说,不要让动画运行多次。
选项 1:禁用按钮
禁用该按钮会阻止它发送onclick事件,并向您的用户发出信号,该按钮暂时不会执行任何操作。如果您的按钮在动画运行时或发生其他事情时不应再做任何事情,我建议您这样做。
方法是在单击按钮后立即禁用该按钮。稍后,一旦该按钮触发的任务(例如动画)完成,并且可以再次单击该按钮,您就可以重新启用该按钮。
<input type="button" id="animateButton" value="Animate" onclick="animate()"/>
function animate() {
// 'this' refers to the button, when the button's click event
// calls this function
this.disabled = true;
startAnimation();
}
function startAnimation() {
// run the animation
// ...
// once the animation is completed, via whatever means you want
// (such as by jQuery's animate.complete callback),
// re-enable the button like this:
document.getElementById("animateButton").disabled = false;
// or address the button some other appropriate way.
}
选项 2:布尔标志,使按钮处于启用状态但什么也不做
这种方法涉及在动画运行时使用布尔标志来忽略点击,而不是直接禁用按钮。
这让用户仍然可以单击按钮。如果您出于任何原因想要启用按钮,例如如果您希望按钮在单击时执行其他操作 - 只是无需每次都启动动画,这将非常有用。
但是,如果它除了启动动画之外什么都不做,那么您可能应该使用选项 1 来禁用它,表示该按钮现在不会做任何事情。
如果你想让这个按钮做其他事情,我建议你让它调用一个不同的函数——例如doStuff()
——并让那个函数调用animate()
下面的函数。
<input type="button" id="animateButton" value="Animate" onclick="animate()"/>
var canAnimate = true;
function animate() {
if (!canAnimate) return; // do nothing if we're not allowed to animate yet
canAnimate = false;
startAnimation();
}
function startAnimation() {
// run the animation
// ...
// once the animation is completed, via whatever means you want
// (such as by jQuery's animate.complete callback),
// set the flag to say we can animate again, like this:
canAnimate = true;
}