即使在我重新加载页面后，如何防止已经在 Javascript 中启动的“onclick”功能？
Posted
技术标签:
【中文标题】即使在我重新加载页面后，如何防止已经在 Javascript 中启动的“onclick”功能？【英文标题】：How do I prevent already started "onclick" function in Javascript even after I reload the page? 【发布时间】：2021-11-16 03:42:57 【问题描述】：我有一个带有“onclick”功能的按钮，它会禁用该按钮 15 秒。之后它会自动点击，但在点击后 15 秒的时间段内，如果我刷新页面，它不会计算剩余的秒数，按钮现在是可点击的。
function up()
$(document).ready(function ()
$("#upside").attr("disabled", true);
document.getElementById("downside").disabled = true;
setTimeout(function ()
$("#upside").removeAttr("disabled");
$("#downside").removeAttr("disabled");
window.location ='/Balnce_add';
,15000);
);
这是我的 html 按钮代码：
<button id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>
【问题讨论】：
没有必要在这样的事件处理程序中使用$(document).ready()。而当页面被刷新时，上一页的一切都会消失；没有任何东西可以在过渡中幸存下来，包括您的超时处理程序。
This 值得一读。
那么先生，我该如何防止这件事，这对我来说非常重要
如果您希望信息在页面重新加载之间保持不变，请将其保存在 sessionStorage 中。当您禁用该按钮时，将开始时间保存在会话存储中。当页面重新加载时，从会话存储中获取开始时间，如果从那时起
【参考方案1】：
这个想法是将startTime 保存到localStorage。然后当我们重新加载页面时，我们会得到remainingTime = startTime + timer - currentTime。如果remainingTime > 0，我们将继续禁用该按钮。如果没有，我们什么也不做。
基于这个想法，我更新了您的代码以使其正常工作。您可以通过以下代码查看演示：
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="upside" onclick="up(true)" type="submit" class="btn btn-success">Up</button>
<script>
function getRemainingTimer(isNew)
var now = new Date();
var timer = 15000;
var remainingTimer = 0;
var startTime = localStorage.getItem("startTime");
if (startTime === null)
if (!isNew) return 0;
localStorage.setItem("startTime", now.getTime());
remainingTimer = timer;
else
remainingTimer = timer + parseInt(startTime) - now.getTime();
return remainingTimer;
function up(isNew)
var remainingTimer = getRemainingTimer(isNew);
console.log(remainingTimer);
if (remainingTimer > 0)
$("#upside").attr("disabled", true);
$("#downside").attr("disabled", true);
var timeout = setTimeout(function()
$("#upside").removeAttr("disabled");
$("#downside").removeAttr("disabled");
window.location = '/Balnce_add';
localStorage.removeItem("startTime");
, remainingTimer);
else
localStorage.removeItem("startTime");
up(false);
</script>
</body>
</html>
另外，您可以通过https://codepen.io/tuandaodev/pen/NWgBjbv查看现场演示
【讨论】：
嘿，您的演示代码工作得非常好，但是当我在我的文件中尝试时，它显示了同样的问题，刷新后它被启用，它不计算铰接时间来启用它 你能帮我解决可能是什么问题 @LEGENDRYzZzZ 我为您准备了另一个带有向下按钮的版本。请让我知道它是否符合您的要求。 codepen.io/tuandaodev/pen/powQgYj @LEGENDRYzZzZ 你在新的 codepen URL 中看到了吗？ @LEGENDRYzZzZ 很高兴为您提供帮助。我也是 *** 的新手。【参考方案2】：这取决于应用程序的设置方式，但一种简单的方法是在 localhost 中存储一些内容，并带有单击按钮的 ID。
myButton.addEventListener('click', (evt) =>
evt.preventDefault();
let dateTime = new Date();
localStorage.setItem('clickedButtons', [id: myButton.id, clickedAt: dateTime]
);
$(document).ready(() =>
let storageButton = localStorage.getItem('clickedButtons')[0];
let dateTime = new Date();
if (dateTime - storageButton.clickedAt < 15000)
let btn = $(`#$storageButton.id`);
btn.attr('disabled') = true;
)
我写得很快，所以可能有点粗略，但总体思路是在单击按钮时，在单击按钮时向 localstorage 添加一些内容，然后在页面加载时检查 localstorage，如果没有自单击按钮以来已 15 秒，请禁用它
【讨论】：
以上是关于即使在我重新加载页面后，如何防止已经在 Javascript 中启动的“onclick”功能？的主要内容，如果未能解决你的问题，请参考以下文章