How do i prevent already started "onclick" function in javascript even after i reload the-CodePudding

please help me with that I have a button with "onclick" function which disable the button for 15 seconds and then it will be automatically clickable but in between 15 seconds of time period after a click if when I do refresh the page it doesn't count the remaining seconds and the button is now clickable

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);
  });
    }

And here is my Html Button Code >>>

<button  id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>

CodePudding user response：

It depends on how the app is setup, but an easy way to do it would be to store something in localhost with the ID of the button was clicked.

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;
  }
})

I wrote this pretty quickly so it's probably a bit rough, but the general idea is when the button is clicked, add something to localstorage with the time it was clicked, and on page load check localstorage, and if it hasn't been 15 seconds since the button was clicked, disable it

CodePudding user response：

The idea is save the startTime to localStorage. And then when we reload page, we will get the remainingTime = startTime timer - currentTime. If remainingTime > 0, we will keep disable the button. If not, we do nothing.

And based on that idea, I updated your code to let it works. You can check the demo by the below code:

<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>

Also, you can check the live demo at https://codepen.io/tuandaodev/pen/NWgBjbv