即使在我重新加载页面后，如何防止已经在 Javascript 中启动的“onclick”功能？答案

【问题标题】：How do I prevent already started "onclick" function in Javascript even after I reload the page?即使在我重新加载页面后，如何防止已经在 Javascript 中启动的“onclick”功能？
【发布时间】：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 中。当您禁用该按钮时，将开始时间保存在会话存储中。当页面重新加载时，从会话存储中获取开始时间，如果从那时起

标签： javascript html spring-boot

【解决方案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 很高兴为您提供帮助。我也是 StackOverflow 的新手。

【解决方案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 秒，请禁用它

【讨论】：