Tengo un botón con una función "onclick" que desactiva el botón durante 15 segundos. Después de eso, se podrá hacer clic automáticamente, pero entre 15 segundos de tiempo después de un clic, si actualizo la página, no cuenta los segundos restantes y ahora se puede hacer clic en el botón.
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); }); }Y aquí está mi código de botón HTML:
<button id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>La idea es guardar startTime en localStorage . Y luego, cuando volvamos a cargar la página, obtendremos el remainingTime = startTime + timer - currentTime . Si remainingTime > 0 , mantendremos deshabilitado el botón. Si no, no hacemos nada.
Y en base a esa idea, actualicé tu código para que funcione. Puede consultar la demostración con el siguiente código:
<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>Además, puede consultar la demostración en vivo en https://codepen.io/tuandaodev/pen/NWgBjbv
Depende de cómo esté configurada la aplicación, pero una manera fácil de hacerlo sería almacenar algo en localhost con la ID del botón en el que se hizo clic.
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; } })Escribí esto bastante rápido, por lo que probablemente sea un poco tosco, pero la idea general es cuando se hace clic en el botón, agregue algo al almacenamiento local con el tiempo en que se hizo clic, y en la carga de la página verifique el almacenamiento local, y si no han pasado 15 segundos desde que se hizo clic en el botón, desactívelo