I have a button with an "onclick" function that disables the button for 15 seconds. After that it will be automatically clickable, but in between 15 seconds of time period after a click, if 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>
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
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